Font Optimization: Performance for Fast Sites

Why Font Optimization Matters

Custom web fonts enhance your brand and readability, but they come at a performance cost. Each font file is a render-blocking resource that can delay text visibility, cause layout shifts, and inflate page weight. A single font family with multiple weights and styles can easily add 200-500KB to your page.

For SEO, font-related performance issues directly impact LCP (when text is the largest contentful paint element) and CLS (when font swapping causes text reflow).

Font Loading Behaviors

The font-display CSS property controls what happens while a font is loading:

font-display: swap

Shows text immediately in a fallback font, then swaps to the custom font when it loads. This prevents invisible text but can cause a visible flash and layout shift.

font-display: optional

The browser uses the custom font only if it is already cached or loads extremely quickly (within ~100ms). Otherwise, the fallback font is used for the entire page visit. This is the best option for CLS prevention because it eliminates font swap shifts entirely.

font-display: block

Hides text for up to 3 seconds while the font loads. Avoid this — invisible text harms both user experience and LCP.

font-display: fallback

A compromise between swap and block. Hides text briefly (~100ms), then shows the fallback. If the custom font loads within ~3 seconds, it swaps in.

Recommendation: Use font-display: optional for body text (CLS prevention) and font-display: swap for display/heading fonts (where the visual swap is less disruptive).

Reducing Font File Size

Subset Your Fonts

Most sites only use Latin characters, yet font files often include glyphs for Cyrillic, Greek, Arabic, and other scripts. Subsetting removes unused characters:

• Google Fonts does this automatically based on the text parameter
• For self-hosted fonts, use tools like glyphhanger or pyftsubset to create custom subsets
• Common subsets: Latin (Basic Latin + Latin-1 Supplement) covers most Western European languages

A full-character font file might be 100KB; a Latin-only subset can be 15-20KB.

Use WOFF2 Format

WOFF2 provides the best compression for web fonts — typically 30% smaller than WOFF and 50% smaller than TTF. All modern browsers support WOFF2, so serve it as your primary format:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: optional;
  font-weight: 400;
}

Limit Font Variations

Every additional weight and style is a separate file. Audit your actual usage:

• Do you really need Regular, Medium, Semibold, and Bold? Often two weights suffice.
• Do you actually use Italic variants? If not, remove them.
• Variable fonts can replace multiple static files with a single file that contains all weights.

Variable Fonts

A variable font contains multiple weights, widths, and styles in a single file. For sites using three or more weights of the same family, a variable font is typically smaller than the combined static files:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font-variable.woff2') format('woff2-variations');
  font-display: optional;
  font-weight: 100 900;
}

Preloading Critical Fonts

For fonts used in above-the-fold content, add a preload hint to start downloading them as early as possible:

<link rel="preload" as="font" type="font/woff2" href="/fonts/heading.woff2" crossorigin />

Important notes:

• Always include crossorigin (even for same-origin fonts) — fonts always require CORS
• Only preload fonts that are actually used on the current page
• Preload 1-2 critical fonts maximum — preloading too many reduces the benefit

Self-Hosting vs. Google Fonts

Self-Hosting Advantages

• Full control over caching, subsetting, and delivery
• No third-party DNS lookups or connections
• Privacy compliance — no user data shared with Google
• Consistent performance — not dependent on Google’s servers

Google Fonts Advantages

• Convenience — easy to add and update
• Automatic subsetting based on detected character usage
• Browser caching (though the cross-site cache was removed in Chrome 86)

Recommendation: Self-host your fonts for the best performance. Download from Google Fonts, convert to WOFF2, subset, and serve from your own CDN.

Fallback Font Matching

When using font-display: swap, minimize the visual shift when fonts swap by matching your fallback font metrics to your custom font:

@font-face {
  font-family: 'CustomFont Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

body {
  font-family: 'CustomFont', 'CustomFont Fallback', sans-serif;
}

The CSS override properties (ascent-override, descent-override, line-gap-override, size-adjust) adjust the fallback font metrics to match the custom font, minimizing layout shift during the swap.

Font Optimization Checklist

• Using WOFF2 format for all font files
• Fonts are subsetted to include only needed characters
• Limited to 2-3 font weights maximum
• font-display: optional for body text, swap for headings
• Critical fonts preloaded with <link rel="preload">
• Self-hosted rather than loaded from third-party CDNs
• Fallback font metrics matched to minimize CLS
• Variable fonts used if 3+ weights are needed

Measuring Font Impact

Performance Metrics

• Check if fonts are render-blocking using Chrome DevTools Network panel
• Measure CLS before and after font optimization
• Check LCP if text is the largest element

Font Loading Waterfall

In Chrome DevTools, the Network panel shows when each font file starts and finishes loading. Look for:

• Late font requests — fonts should start loading early
• Large font files — anything over 50KB per file deserves investigation
• Multiple font files — each file is an additional request

Key Takeaways

Font optimization is often overlooked but can significantly impact Core Web Vitals:

1. Use WOFF2 and subset aggressively to minimize file sizes
2. Choose the right font-display strategy — optional for CLS-sensitive text, swap for headings
3. Preload critical fonts used in above-the-fold content
4. Self-host fonts for maximum control and performance
5. Match fallback font metrics to minimize swap-induced layout shifts
6. Limit font variations — every additional weight adds download time

Fast font loading contributes to better LCP, lower CLS, and a smoother reading experience for your visitors.