Short answer: use two font families on a website, and treat three as your absolute maximum. One family for headings, one for body text, and a third only if it earns its place. Every extra family (and every extra weight inside a family) adds download weight, render delay, and a risk of layout shift, which is why this is a design decision and a performance decision. photolilo.com has a solid rundown on this.
At Pixelbright we audit a lot of sites, and font stacking is one of the most common self-inflicted speed problems we find. Below is the practical rule, the exceptions, and the numbers behind it.
The 2-3 font rule, explained in one minute
The widely repeated guidance across design communities is simple: no more than three typefaces in one design, and two is usually better. Here is how the roles break down.
| Number of fonts | What it looks like | Best for |
|---|---|---|
| 1 font | One family, hierarchy created with weight, size and spacing | SaaS, dashboards, documentation, fast-loading landing pages |
| 2 fonts | Display font for headings + neutral font for body | Most business sites, ecommerce, portfolios, blogs |
| 3 fonts | Headings + body + one accent for a very specific job | Editorial sites, brands with a strong logotype or code-heavy docs |
| 4+ fonts | Visual noise, inconsistent hierarchy, slower pages | Almost nothing. This is normally a leftover from theme demos and plugins. |
Why two works so well
- Contrast without conflict. Two families that differ clearly (a geometric sans for headings, a highly readable sans or serif for body) read as intentional. Two families that look similar read as a mistake.
- Predictable hierarchy. Users learn your pattern in seconds: big and bold means heading, regular means content.
- Fewer network requests. Two families with three weights each is already 6 files. Four families quietly becomes 12 to 20.
First, get the vocabulary right: font vs typeface vs weight
Most beginner confusion comes from mixing these up, and it matters because the performance cost is attached to files, not to “fonts” in the abstract.
- Typeface / family: the design itself, for example Inter, Merriweather, Poppins.
- Font (file): one specific cut of that family, for example Inter Regular 400 or Inter Bold 700 italic. Each one is a separate download unless you use a variable font.
- Style: roman (upright) or italic. Italic is a separate file too.
So when the rule says “two fonts”, it means two families. Using Regular, Semibold and Bold inside one family does not break the rule. Loading nine weights of that family does break your performance budget.
When is a third font actually justified?
A third family is a decision, not a default. It is defensible when it does a job the other two cannot do:
- Monospace for code or data. Documentation, developer tools, invoices and pricing tables genuinely benefit from a monospaced family.
- A logotype or hero-only display face. If it appears once or twice per page in large sizes, you can often subset it down to a handful of characters.
- A specialised script or accent face used sparingly. Quotes, badges, or a signature. Used once per page, not in navigation and body copy.
- Editorial contrast. Long-form magazines that pair a serif for articles, a sans for UI, and a condensed face for decks and captions.
- Multi-script support. If you publish in Latin plus Arabic, Greek, Cyrillic or CJK, you may need an extra family for correct script coverage. This is script coverage, not decoration.
If your reason is “it looked nice in the theme demo”, that is not a justification. And if you cannot explain in one sentence what the third font does that the other two cannot, delete it. The piece Ultimate Guide to Typography in Design makes a good next read.
The performance cost nobody mentions in typography guides
This is where most articles on this keyword stop, and where we think the real answer lives. Web fonts are render-critical resources: the browser needs them to paint text, and text is very often your Largest Contentful Paint element.
Rough download weight per font file
| Asset | Typical WOFF2 size | Notes |
|---|---|---|
| Static weight, Latin subset | 15 to 30 KB | One weight, one style |
| Static weight, Latin + Latin Extended + Cyrillic | 40 to 90 KB | Common default when you copy a full embed code |
| Variable font, Latin subset (all weights) | 30 to 70 KB | Often cheaper than 3 static weights |
| Decorative display face | 25 to 120 KB | Heavier outlines, more contours |
| CJK family | 1 to 6 MB unsubset | Must be subset or served in chunks |
How it compounds
Take a fairly ordinary setup: three families, each with Regular, Semibold, Bold, plus italics for the body font.
- 3 families x 3 weights = 9 files
- Plus 3 italics = 12 files
- At 25 KB average = roughly 300 KB of fonts before a single image loads
Now compare a disciplined two-font setup with variable fonts and Latin subsetting: two files, around 80 to 120 KB total. You just removed most of a mobile page’s text-blocking payload.
The three costs that hurt most
- Delayed text rendering. With the default behaviour, browsers hide text for up to about 3 seconds while a font loads. That directly damages LCP on slow connections.
- Layout shift (CLS). Fallback font swaps to web font, metrics differ, content jumps. More families means more chances to shift.
- Third-party connections. Fonts hosted on an external domain add DNS lookup, TCP and TLS handshakes before the download even starts. Note that browser cache partitioning means a visitor’s cached copy from another site no longer helps you, so the old “everyone already has it cached” argument is dead.
Does font count affect SEO?
Not directly. Google does not count your typefaces. But Core Web Vitals are part of the page experience signals, and heavy font stacks hit two of them:
- LCP: if your hero heading or first paragraph is the LCP element, a slow font delays it.
- CLS: font swaps that resize text push content around, which users hate and metrics record.
There is also an indirect but real effect: on mobile, slow first paint increases bounce and reduces engagement, and that behaviour feeds back into how your pages perform in search over time. So the SEO warning is simple: fonts are a budget, not a free design choice.
How to keep fonts fast (checklist)
- Cap yourself at 2 families, 3 absolute maximum. Write it into your brand guidelines so future contributors cannot drift.
- Limit weights to what you actually use. Typically Regular 400 and Bold 700, plus one mid weight like 600 if your headings need it. Do not load 100 through 900.
- Prefer variable fonts when you need three or more weights from the same family.
- Self-host in WOFF2 from your own domain or CDN to avoid extra third-party handshakes.
- Subset aggressively. Ship only the scripts you publish in. Latin only if you publish in English or French only.
- Use
font-display: swapso text is visible immediately with a fallback, oroptionalif you accept a fallback on first visit for maximum stability. - Preload only the 1 or 2 files needed above the fold. Preloading everything defeats the purpose.
- Match fallback metrics with
size-adjust,ascent-overrideanddescent-overrideon an@font-facefallback to kill layout shift. - Avoid faux styles. If you use bold and italic, load the real cuts or let the browser synthesise them knowingly, do not do both.
- Audit what your theme and plugins load. On WordPress, page builders frequently inject their own font requests. Check the network tab and count the font files.
Bonus: the zero font option
A system font stack loads instantly because the files are already on the device. Something like system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif costs 0 KB. Many product interfaces and admin panels use exactly this. If your brand does not depend on a specific typeface, this is the fastest typography decision you will ever make. The team at toptal.com reached a similar conclusion.
Building hierarchy with only two fonts
Beginners add fonts because they think they need more variety. What they actually need is more contrast within their existing families. Your levers:
- Size (use a consistent scale)
- Weight (400 vs 700 reads clearly)
- Colour and opacity (primary text vs muted meta text)
- Letter spacing (slightly tighter headings, slightly wider small caps)
- Case (uppercase eyebrow labels)
- Space (margins do more work than typefaces)
A simple, safe type scale
| Element | Mobile | Desktop | Weight |
|---|---|---|---|
| H1 | 28 to 32 px | 40 to 56 px | 600 to 700 |
| H2 | 24 px | 32 to 36 px | 600 to 700 |
| H3 | 20 px | 24 px | 600 |
| Body | 16 to 17 px | 17 to 20 px | 400 |
| Small / captions | 13 to 14 px | 14 px | 400 to 500 |
Line length: aim for 50 to 75 characters per line for body copy. Line height: around 1.5 to 1.65 for paragraphs, 1.1 to 1.25 for large headings.
Pairings that work with two families
- Neutral sans + neutral sans: Inter for UI, Source Sans for long text. Quiet and safe.
- Geometric sans + humanist sans: Poppins headings, Inter body.
- Serif + sans: Playfair Display or Fraunces headings, Inter or Work Sans body. Classic editorial contrast.
- Sans + serif: Inter headings, Source Serif or Lora body. Great for long-form reading.
- Single variable family: Inter or Figtree only, hierarchy built with weight and size. Fastest and hardest to get wrong.
Common mistakes we fix on client sites
- Theme loads a font, the page builder loads a second copy of the same font, a form plugin loads a third family.
- Google Fonts embed copied with every weight from 100 to 900, italics included.
- Two heading fonts that look almost identical, which reads as sloppy rather than designed.
- Body text under 16 px on mobile, forcing pinch and zoom.
- Decorative display font used for paragraphs, which destroys readability.
- No fallback metric matching, so the whole page jumps when fonts arrive.
The Pixelbright rule of thumb
We ship most projects with one or two variable families, Latin subset, self-hosted, with a total font budget under 100 KB. A third family needs a written reason. That constraint has never made a design worse, and it consistently makes pages faster.
FAQ
What is the 3 font rule?
The 3 font rule says you should never use more than three typefaces in a single design: one for headings, one for body text, and at most one accent face for a specific purpose. On the web, most sites are better with two.
Is 3 fonts too much?
Three is the ceiling, not the target. It is acceptable if each family has a distinct job (headings, body, code or accent). It becomes too much when the third font is decorative, duplicated in role, or adds more weight files that delay text rendering.
What is the golden rule for font size?
Keep body text at a minimum of 16 px on mobile, 17 to 20 px on desktop for long reading, use a consistent scale (roughly 1.2x to 1.33x between levels), and keep lines between 50 and 75 characters. Never rely on font size alone for hierarchy: pair it with weight and spacing.
What is the most used font on websites?
Neutral sans-serifs dominate. Inter, Roboto, Open Sans, Montserrat, Poppins and Lato are among the most deployed web fonts, and native system font stacks (San Francisco, Segoe UI, Roboto) power a huge share of app-style interfaces because they cost nothing to load.
Do italics and bold count as extra fonts?
Not as extra families, so they do not break the 2-3 rule. But each one is a separate file to download unless you use a variable font, so they do count against your performance budget.
Is one font enough for a whole website?
Yes. A single well-built variable family can carry an entire site if you use weight, size, colour and spacing for hierarchy. It is the fastest option and the hardest to make look inconsistent.
Are Google Fonts bad for performance?
The fonts themselves are fine, the delivery is the issue. Loading them from an external domain adds connection overhead, and cached copies from other sites no longer help visitors due to cache partitioning. Downloading the WOFF2 files and self-hosting them, subset to the scripts you need, is usually faster. It also simplifies privacy compliance in the EU.
How many font weights should I load?
Two to four per family in most cases: Regular 400, one mid weight for headings, Bold 700, and italic only if your content uses it. If you need more variation, switch to a variable font instead of stacking static files.
Need a second opinion on your typography and page speed? Pixelbright audits font loading, Core Web Vitals and visual hierarchy together, because on the web they are the same problem. Get in touch and we will tell you exactly which font files your site can stop loading today.