Font Display Swap and FOUT

What Font Display Does

The font-display CSS property controls what the browser shows while a custom web font is loading. Without it, most browsers hide text entirely for up to 3 seconds — a behavior called FOIT (Flash of Invisible Text). The font-display: swap value tells the browser to show text immediately in a fallback font, then swap to the custom font once it loads. This eliminates invisible text but introduces a visible reflow called FOUT (Flash of Unstyled Text).

The font-display values

The font-display property is set in @font-face declarations and accepts five values:

• auto — browser default behavior, which usually means FOIT. Text is invisible while the font loads.
• swap — shows the fallback font immediately, swaps to the custom font whenever it arrives. No invisible text, but a visible reflow occurs. This is the most common recommendation.
• block — hides text for a short block period (up to 3 seconds), then swaps. Similar to auto but with a defined timeout.
• fallback — very short invisible period (about 100 ms), then shows the fallback. The custom font is swapped in only if it loads within about 3 seconds, otherwise the fallback is used for the rest of the page’s lifetime.
• optional — extremely short invisible period. The browser may decide not to use the custom font at all if it does not load almost instantly. Best for non-critical fonts where consistency matters more than exact typography.

Why swap is the default recommendation

Google Fonts uses font-display: swap by default, and most performance guidance recommends it because invisible text is a worse user experience than a brief visual reflow. From a Core Web Vitals perspective, swap helps LCP because text is rendered immediately rather than waiting for the font to load. However, the swap itself can cause layout shift (CLS) if the fallback and custom fonts have significantly different sizes.

The CLS trade-off

When the browser swaps from a fallback font to a custom font, text dimensions often change — lines may wrap differently, headings may grow or shrink, and content below shifts. This movement registers as CLS. The severity depends on how different the fallback and custom fonts are in their metrics (character widths, line height, ascent/descent).

Modern CSS can minimize this with font metric overrides: the size-adjust, ascent-override, and descent-override properties on @font-face let you tune the fallback font’s dimensions to closely match the custom font, reducing the visible reflow when the swap occurs.

Choosing the right value

For most WordPress sites, swap is the right default. If CLS from font swapping is a measurable problem, consider optional for non-critical fonts (like decorative headings) and swap only for the primary body font. The best approach combines font-display with font loading optimizations — preloading, self-hosting, WOFF2 format — so the custom font loads fast enough that the swap is barely noticeable.

Further Reading

• Controlling font performance with font-display (web.dev) — Detailed explanation of each font-display value with visual examples.
• font-display (MDN Web Docs) — Technical reference for the font-display CSS descriptor.

Related Articles