Web Font Optimization Guide

Optimize web fonts to prevent layout shifts and improve loading performance. Covers font-display, preloading, subsetting, and variable fonts.

fontsperformancecls

Font Loading Problems

Web fonts can cause Flash of Invisible Text (FOIT), Flash of Unstyled Text (FOUT), and layout shifts when fonts swap. Proper optimization prevents these issues.

Font Optimization Techniques

1

Use font-display

font-display: swap shows fallback text immediately. font-display: optional may skip the web font on slow connections.

2

Preload Critical Fonts

Use <link rel='preload' as='font'> for fonts needed above the fold.

3

Subset Fonts

Only include character sets you need. Tools like glyphhanger can create subsets.

4

Self-Host Fonts

Self-hosting eliminates third-party requests. Use woff2 format for best compression.

5

Consider Variable Fonts

Variable fonts combine multiple weights in one file, reducing total font payload.

Frequently Asked Questions

font-display: swap is usually best for body text. For decorative fonts, consider optional to avoid layout shifts entirely.
Google Fonts is convenient but adds third-party requests. For best performance, self-host the fonts you need in woff2 format.

Ready to audit your website?

Get instant performance, SEO, and accessibility scores for your website.

Start Free Audit