Optimize web font loading
Use efficient font formats and loading strategies to prevent layout shifts and invisible text.
- Use `font-display: swap` to prevent invisible text during load
- Preload critical fonts to discover them earlier
- Use modern formats like WOFF2 for better compression
Rule Details
Fonts are often discovered late by the browser because they are referenced inside CSS files. Optimizing how they are fetched and rendered is key to a stable and fast UI.
Code Examples
1. Using font-display: swap
This tells the browser to show the fallback font immediately and swap it once the custom font is ready.
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/my-font.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* Crucial for performance */
}2. Preloading Critical Fonts
Place this in your <head> to start the download as soon as possible.
<link
rel="preload"
href="/fonts/my-font.woff2"
as="font"
type="font/woff2"
crossorigin
>3. Self-Hosting for Performance
Self-hosting fonts eliminates extra DNS lookups and TLS connections to third-party providers like Google Fonts.
/* Better than linking to external CSS */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-subset.woff2') format('woff2');
}Why It Matters
- Visual Stability: Prevents layout shifts when a custom font replaces a fallback font with different dimensions (CLS).
- Perceived Speed: Using
font-display: swapensures users can read content immediately using a system font while the custom font loads. - Bandwidth Efficiency: Modern formats like WOFF2 offer significantly better compression than older formats like WOFF or TTF.
- Discovery Time: Preloading fonts allows the browser to start the download before the CSS has even been parsed.
Best Practices
Verify the font waterfall in PageSpeed Insights (opens in new tab) or DevTools after each change, because good font loading is about earlier discovery and stable fallback metrics rather than just flipping font-display: swap.
✅ Use WOFF2: It is the most efficient format and is supported by all modern browsers. ✅ Subset Your Fonts: Only include the characters you actually need (e.g., Latin characters only) to reduce file size. ✅ Limit Font Variations: Avoid loading every weight (100, 200, 300, etc.) if you only use Regular and Bold. ✅ Variable Fonts: Use a single variable font file instead of multiple separate files for different weights.
❌ Don't Use FOIT: Avoid the default browser behavior of hiding text until the font loads (Flash of Invisible Text). ❌ Avoid Base64 Inlining: Inlining fonts as Base64 in your CSS increases the CSS file size and prevents the font from being cached separately.
Tools & Validation
- Google Fonts Helper can speed up self-hosting work when you need a quick export of font files and matching CSS.
- FontSubsetter (opens in new tab): Reduce font file size by removing unused characters.
- Lighthouse (opens in new tab): Checks if "All text remains visible during webfont loads."
- Web Font Configurator (opens in new tab): Analyze what's inside your font files.
Standards
- Use web.dev: Learn Performance as the standard for measuring the final production behavior, not just local synthetic output.
- Use Chrome Developers: Lighthouse overview as the standard for measuring the final production behavior, not just local synthetic output.
Verification
Automated Checks
- Measure the affected page or flow in Lighthouse, PageSpeed Insights, or DevTools and confirm the targeted metric improves.
- Inspect the network waterfall or performance timeline to confirm the intended resource or execution change actually took effect.
Manual Checks
- Verify the change on a throttled mobile profile, not just local desktop.
- If this rule maps to a budget or Web Vital, confirm the page now stays within that threshold.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Check font loading strategies and verify that `font-display` is used and critical fonts are preloaded.
Fix
Auto-fix issues
Add `font-display: swap` to `@font-face` declarations and use `<link rel='preload'>` for the most important fonts.
Explain
Learn more
Explain how font loading affects perceived performance and layout stability.
Review
Code review
Review the routes, assets, and loading behavior that affect Optimize web font loading. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.