Custom typography is one of the quickest ways to make a brand look polished. It is also one of the quietest ways to slow a page down. Fonts are render-critical: until the browser has a usable font file, your headline may be invisible, or it may suddenly jump when the brand font replaces a fallback.
Those delays and jumps show up directly in Core Web Vitals. Late fonts can push back Largest Contentful Paint when the largest element is text, and font swaps are a common cause of Cumulative Layout Shift. The good news is that fonts are one of the most fixable performance problems on most sites.
This guide explains how web fonts load, which font-display value to choose, how to cut font file size, and a step-by-step process for auditing and fixing fonts in 2026.
Key Takeaways
- Use WOFF2 only, and subset fonts to the characters and weights you actually use.
- Self-host critical fonts or preconnect early to the font provider to remove connection delays.
- Choose
font-displaydeliberately:swapfor fast text,optionalfor zero font-swap layout shift. - Match fallback font metrics with
size-adjustand related descriptors to reduce CLS. - Preload only one or two truly critical font files; over-preloading steals bandwidth from other resources.
How Web Fonts Affect Performance and SEO
When a browser builds a page, it discovers font files only after it has downloaded the HTML and the CSS that references them. That chain (HTML, then CSS, then font) means fonts often arrive late. While the browser waits, it has to decide whether to hide the text or show a fallback.
According to web.dev's font guidance, Chromium-based browsers and Firefox block text rendering for up to three seconds if a web font has not loaded. That invisible period is sometimes called a "flash of invisible text". The alternative, showing a fallback and swapping later, can cause visible reflow.
Both effects matter for search. Google uses Core Web Vitals as part of its page experience signals, so slow text rendering and layout shifts are worth fixing, especially on templates that drive organic traffic. Our Core Web Vitals guide covers how the three metrics fit together, and the dedicated posts on Largest Contentful Paint and Cumulative Layout Shift go deeper on each.
“These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.”
— web.dev, Best practices for fonts
What the Web Actually Does With Fonts
The 2024 Web Almanac fonts chapter from HTTP Archive shows how common these patterns are. The figures below come from that chapter.
| Practice (2024 Web Almanac) | Desktop | Mobile |
|---|---|---|
| Sites using Google Fonts (alone or with another option) | ~57% | ~48% |
| Sites serving WOFF2 | 81% | 78% |
font-display: swap | 44% | 45% |
font-display: block | 24% | 23% |
| Pages preloading fonts | 11% | 11% |
Pages using preconnect | 18% | 18% |
In other words, most sites already use WOFF2, but relatively few use resource hints, and a significant share still choose block, which hides text while the font loads.
Choosing the Right font-display Value
The font-display descriptor in your @font-face rule tells the browser what to do while a font is loading. Each value is a trade-off between fast text and visual stability.
| Value | Block period | Swap behaviour | Best used for |
|---|---|---|---|
auto | Browser default | Usually like block | Avoid; be explicit |
block | Up to about 3s | Swaps when loaded | Icon fonts or logos where fallback text looks wrong |
swap | Very short | Swaps whenever font arrives | Body and heading text where speed matters most |
fallback | About 100ms | Swaps only within about 3s | A balance between speed and stability |
optional | About 100ms | No late swap; browser may skip the font | Pages where CLS is the priority |
web.dev notes that swap delays text rendering the least, while optional ensures there are no font-swap layout shifts. A sensible default is swap combined with a metric-matched fallback, or optional for body text on pages with CLS problems.
Step-by-Step: How to Optimise Web Fonts
- Inventory your fonts. Open DevTools, filter the Network panel by "Font", and list every family, weight and style that loads on your key templates.
- Remove what you do not need. Many sites load five or six weights but use two. Consider a variable font if you genuinely need many weights.
- Convert to WOFF2. web.dev describes WOFF2 as the newest format with the widest browser support and the best compression.
- Subset. Strip glyphs for languages and characters you never display, and use
unicode-rangeto split large character sets. - Decide where fonts are hosted. Self-hosting removes a third-party connection; if you keep a font service, add
preconnectto its origin early in the<head>. - Preload the one or two most critical files, typically the main body or heading font, with
<link rel="preload" as="font" type="font/woff2" crossorigin>. - Set
font-displayon every@font-facerule. - Tune the fallback using
size-adjust,ascent-overrideanddescent-overrideso system fonts take up the same space. - Cache fonts for a long time. Versioned font files can use a long
Cache-Controllifetime; see our guide to browser caching. - Measure again with PageSpeed Insights and field data from Search Console.
Example @font-face rule
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-v3.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
unicode-range: U+0000-00FF;
}Self-Hosting vs Font Services
web.dev notes that on paper a self-hosted font should perform better because it removes a third-party connection setup. In practice, the difference depends on how well each option is configured. A well-tuned font service with preconnect can beat a badly configured self-hosted setup. What matters most is that the font is small, discovered early and cached well. If you use many external services, our post on third-party scripts explains how extra origins add connection costs.
Fonts and Lighthouse in 2026
Lighthouse 13, released in October 2025, replaced several older audits with "insight" audits that match the Chrome DevTools Performance panel. The old font-display audit became a font display insight, and the separate preload-fonts audit was removed. If an older checklist tells you to look for a specific audit name, expect the wording to differ. Our Lighthouse audit guide walks through reading the report.
Common Mistakes
- Preloading every weight. Preload competes with images and CSS; web.dev warns it takes browser resources away from other requests.
- Forgetting
crossoriginon preloads, which causes the font to be downloaded twice. - Using icon fonts for a handful of icons. Inline SVG is usually lighter and more accessible.
- Hiding text with
blockon body copy, leaving users staring at blank space on slow connections. - Ignoring fallback metrics, so every swap nudges the layout and adds to CLS.
- Loading fonts through CSS
@import, which adds another step to an already long request chain; see our post on render-blocking resources. - Treating fonts in isolation. Fonts are often one of several quick performance wins; check heavy markup too, as explained in our post on excessive DOM size.
Related Guides
- Third-Party Scripts: How They Slow Your Site and What to Do
- Browser Caching: How to Set It Up for Faster Repeat Visits
- Index Bloat: How to Find and Remove Low-Value Indexed Pages
Frequently Asked Questions
Do web fonts affect SEO?
Indirectly. Fonts influence loading speed and layout stability, which feed Core Web Vitals and user experience. Google does not rank pages on which typeface they use.
Should I use font-display swap or optional?
Use swap when getting text on screen fast matters most and pair it with a metric-matched fallback. Use optional when layout stability is the priority, accepting that some first-time visitors will see the fallback font.
Is it better to self-host Google Fonts?
Self-hosting removes a connection to another origin and gives you full control over caching and subsetting, so it is often faster. A well-configured service with preconnect can also perform well.
What is the best font format in 2026?
WOFF2. It has broad browser support and the best compression, so most sites no longer need WOFF, TTF or EOT fallbacks.
How many fonts should a page load?
There is no fixed rule, but fewer is better. Two families, or one variable font, covering the weights you actually use is a sensible target for most sites.
Conclusion
Font optimisation is a small project with outsized results: fewer weights, WOFF2, subsetting, early discovery and a smart font-display choice can noticeably improve how quickly your text appears and how stable your layout is.
If fonts are only one part of a slow site, our page speed optimization service can audit the full loading chain. Get a quote and we will tell you where the biggest wins are.
