How Web Fonts Affect Performance
Custom web fonts give a site its visual identity, but they come with a performance cost. Fonts are render-blocking resources by default — the browser will not display text styled with a custom font until that font file has downloaded. This directly affects Largest Contentful Paint (LCP) when the largest element contains text, and can cause layout shift (CLS) when a fallback font is swapped for the custom font after loading.
The font loading timeline
When a browser encounters a CSS rule that references a custom font, three things can happen depending on the font-display strategy:
- Invisible text (FOIT) — the browser hides text entirely until the font loads. This is the default behavior in most browsers and can leave text invisible for up to 3 seconds.
- Fallback then swap (FOUT) — the browser shows text in a fallback system font immediately, then swaps to the custom font once loaded. This avoids invisible text but can cause a visible reflow.
- Optional rendering — the browser uses the custom font only if it loads extremely quickly (within about 100 ms), otherwise sticks with the fallback permanently for that page load.
What makes font loading slow
Several factors compound font loading delays:
- Too many font files — each weight and style (regular, bold, italic, bold italic) is a separate file. Loading 6-8 font files is common on sites that use multiple weights across headings, body text, and UI elements.
- Third-party font hosting — loading fonts from Google Fonts or Adobe Fonts requires a DNS lookup and connection to an external server before the font file even begins downloading.
- Large file sizes — older font formats (TTF, EOT) are significantly larger than modern WOFF2 files. A single TTF file can be 200+ KB versus 20-40 KB for the same font in WOFF2.
- Late discovery — if the font is referenced only in an external CSS file, the browser cannot start downloading it until the CSS file itself has been downloaded and parsed.
Strategies to improve font loading
Self-hosting fonts eliminates the extra DNS lookup and connection time. Converting fonts to WOFF2 format reduces file sizes. Preloading critical fonts with <link rel="preload"> tells the browser to start downloading fonts early, before it discovers them in CSS.
Subsetting fonts — removing characters you do not use (Cyrillic, Greek, extended Latin) — can cut font file sizes by 50% or more. And limiting the number of weights and styles to what you actually use avoids downloading font files that style only a handful of elements.
Tools That Can Help
OMGF (Optimize My Google Fonts) is a free plugin that downloads Google Fonts, converts them to WOFF2, and serves them locally. Perfmatters includes options to preload fonts and manage font loading behavior. Google’s Webfonts Helper generates self-hosted font packages with proper CSS.
Further Reading
- Best practices for fonts (web.dev) — Google’s comprehensive guide to font loading performance strategies.