Web Font Loading Strategies
Stop invisible text and layout shifts. Learn how to load custom fonts without ruining performance.
Custom fonts are a cornerstone of web design, but they are often the biggest culprit behind poor Web Performance scores. They block rendering, cause text to be invisible, and trigger massive layout shifts when they finally load.
The Problems: FOIT and FOUT
FOIT (Flash of Invisible Text)
By default, most browsers will hide text for up to 3 seconds while waiting for a custom font to download. If the user is on a slow connection, they are left staring at a blank page. This destroys your Largest Contentful Paint (LCP).
FOUT (Flash of Unstyled Text)
If the browser shows a fallback system font first, and then the custom font loads, the text will suddenly change appearance. If the new font is wider or taller, it pushes content down the page, ruining your Cumulative Layout Shift (CLS) score.
Interactive Font Strategy Selector
Use this tool to find the right font-display strategy for your specific use case.
Core Font Loading Techniques
1. font-display
The font-display property inside your @font-face declaration controls how the font is applied.
swap: Shows the fallback font immediately. Swaps to the custom font when ready. (Best for body text).optional: Gives the font a tiny window (100ms) to load. If it misses the window, the browser uses the fallback font for this page load and caches the custom font for the next visit. (Best for decorative fonts).block: Hides text for up to 3 seconds. (Rarely recommended, except for icon fonts).
2. Preloading Critical Fonts
If a font is critical (like your main hero text), don't wait for the browser to parse the HTML, then download the CSS, then parse the CSS to discover the font. Tell the browser to download it immediately using a preload link in your <head>.
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>Warning: Only preload 1 or 2 critical fonts. Preloading too many assets clogs the network and delays the initial HTML render.
3. Subsetting Fonts
A standard font file might contain characters for English, Greek, Cyrillic, and hundreds of special symbols, resulting in a 300KB file. If your site is only in English, you can "subset" the font to only include Latin characters, reducing the file size to 20KB or 30KB.
Tools like glyphhanger or Google Fonts' API parameter (&text=Hello) allow you to generate subsetted font files.
4. WOFF2 Format
Always use the WOFF2 format. It offers ~30% better compression than standard WOFF and is supported by all modern browsers. You can provide WOFF as a fallback for older browsers, but ditch TTF and EOT.
The Ultimate Fallback: System Font Stacks
The fastest font is the one you don't have to download. Modern operating systems have excellent, highly readable default fonts (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android). You can leverage these instantly using the system font stack.
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}Frequently Asked Questions
What is FOIT in web fonts?
FOIT stands for Flash of Invisible Text. It occurs when the browser hides the text while waiting for a custom web font to download. This ruins the user experience and severely hurts your LCP score.
What is font-display: swap?
font-display: swap is a CSS property that tells the browser to immediately render text using a fallback system font, and then "swap" the custom font in once it has finished downloading. This prevents FOIT.
Why should I preload fonts?
Preloading critical fonts using <link rel="preload"> tells the browser to start downloading the font file immediately, before the CSS is even parsed. This reduces the time users spend looking at fallback fonts or invisible text.