Font Loading Performance Issues

Understanding and fixing web font loading performance, FOIT and FOUT issues

What This Means

Web font loading can significantly impact page performance and user experience. Poor font loading strategies lead to:

FOIT (Flash of Invisible Text): Text remains invisible while fonts load
FOUT (Flash of Unstyled Text): System fonts display briefly before web fonts load
Layout shifts: Page jumps when fonts load and metrics change
Render blocking: Page rendering delayed waiting for fonts
Increased LCP: Largest Contentful Paint delayed by font loading

Font loading issues affect First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).

Browser DevTools

Performance Panel

Common Issues

Use font-display: swap - Prevent FOIT by showing fallback fonts immediately

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

Preload critical fonts - Load important fonts early

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

Limit font variants - Only load necessary weights and styles (typically 2-3 max)
Use WOFF2 format - Modern, compressed format with best browser support
Self-host fonts - Avoid third-party requests to Google Fonts or Adobe Fonts

Optimize fallback fonts - Match metrics to reduce layout shift

font-family: 'CustomFont', Arial, sans-serif;
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;

Use Font Loading API - Control font loading programmatically

const font = new FontFace('CustomFont', 'url(/fonts/custom.woff2)');
await font.load();
document.fonts.add(font);