The relationship between typography and web performance is often framed as a trade-off: beautiful fonts versus fast pages. This framing is misleading. The actual trade-off is between uninformed font loading and strategic font loading. The difference in visual quality between a well-optimised custom font stack and a system font stack is significant. The difference in performance, when fonts are loaded correctly, is negligible.
The Cost of Custom Fonts
A typical custom font implementation loads four to eight font files: regular and bold weights in both roman and italic styles. At approximately 20-40KB per file after WOFF2 compression, this adds 80-320KB to the initial page weight. More importantly, font files block text rendering by default, meaning users see invisible text until fonts have downloaded.
This is the actual performance problem with custom fonts — not their file size but their render-blocking behaviour. A 200KB font file on a fast connection adds milliseconds to load time. But invisible text during those milliseconds creates a perceived performance problem that is far worse than the actual delay.
Strategic Font Loading
The solution is not to abandon custom fonts but to load them strategically. The font-display CSS property provides the primary mechanism. Setting font-display to swap ensures that text is immediately visible in a fallback font, with the custom font applied once it has loaded. This eliminates the invisible text problem while preserving the design intent.
Subsetting and Variable Fonts
Font subsetting removes unused characters from font files, reducing their size significantly. A Latin-only subset of a font that includes Cyrillic, Greek, and extended Latin characters can be 60-70% smaller than the full file. Variable fonts take this further by encoding multiple weights and styles in a single file, reducing the total number of HTTP requests.
The Fallback Strategy
The most overlooked aspect of web typography is the fallback font specification. When a custom font is loading, the fallback font determines what users see. A poorly chosen fallback creates a jarring layout shift when the custom font arrives, as different fonts have different metrics — x-height, character width, line height.
The CSS size-adjust, ascent-override, and descent-override properties allow precise matching of fallback font metrics to custom font metrics. This eliminates cumulative layout shift caused by font swapping, addressing one of the three Core Web Vitals directly.
Practical Recommendations
Load no more than two font families. Use variable fonts where available. Subset aggressively for the character sets you actually use. Preload the most critical font file — typically the body text regular weight — using a link rel preload tag. Set font-display to swap on all font-face declarations. And invest time in matching your fallback font metrics to your custom font metrics.
These decisions, made once during the initial design system implementation, eliminate the typography-performance tension entirely. The result is a site that loads fast, renders text immediately, and presents the typographic quality that distinguishes professional design from default styling.
Frequently Asked Questions
- How does typography affect website performance?
- Typography significantly impacts performance through font file sizes, loading behaviour, and rendering. A single web font file can range from 20KB to 200KB, and most sites use 2-4 font files. Without proper optimisation, fonts cause layout shifts (CLS), delayed text rendering (contributing to LCP), and increased total page weight. The key performance strategies are font subsetting (removing unused characters), using modern formats like WOFF2, implementing font-display: swap or optional, and preloading critical fonts.
- What is the best font format for web performance?
- WOFF2 is the optimal format for web performance, offering 30-50% better compression than WOFF and supported by all modern browsers. For maximum compatibility, serve WOFF2 as the primary format with WOFF as a fallback. Avoid serving TTF or OTF formats to web browsers as they are significantly larger. When using Google Fonts, the CDN automatically serves the optimal format, but self-hosting with WOFF2 files gives you more control over caching and loading behaviour.
- How many fonts should a website use for optimal performance?
- For optimal performance, limit your site to two font families: one for headings and one for body text. Each additional font family adds 40-200KB of downloads and increases rendering complexity. Within each family, limit yourself to 3-4 weights (e.g., regular, medium, semibold, bold). Variable fonts can reduce total file size when you need multiple weights, as a single variable font file replaces multiple static font files.