FOIT, FOUT, and Font Loading
Web font loading trades invisible text while fonts download (FOIT) against a fallback flash that swaps later (FOUT); font-display and size-adjusted fallbacks control the trade-off.
Definition
FOIT is the period text stays invisible waiting for the web font; FOUT is the fallback text that renders first and swaps when the font arrives. The font-display descriptor in @font-face selects block, swap, fallback, or optional behavior, and metric-compatible fallback fonts with size-adjust reduce the visual shift at swap time.
Context and scope
Tuned on text-heavy pages where perceived speed and layout stability both matter. Interacts with preload hints, subsetting, and self-hosting versus third-party font CDNs.
Common misconceptions
- font-display: swap eliminates downsides — it removes invisible text but guarantees a visible reflow when fonts arrive late
- Fonts block rendering by default — modern defaults show fallback text after a short block period rather than waiting indefinitely
- Local() in src avoids downloads — it helps only when the font exists locally and can mismatch metrics across systems
Anti-patterns
- Using font-display: block for long periods and shipping a blank hero headline on slow networks
- Loading a dozen weights and styles of a family when two variable axes would cover the design
- Ignoring size-adjust and metric overrides, so every swap reflows paragraphs visibly
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
What it is
Text needs a font before it can paint pixels. A remote web font introduces a race between bytes and paint. The two failure aesthetics are invisible text (FOIT) and wrong-font-then-swap (FOUT). The choice is a product decision about which failure users tolerate, encoded in font-display.
How it works
block hides text up to about three seconds while swapping after; swap shows fallback immediately; fallback mixes a short block with a strict swap window; optional lets the browser decide, possibly never swapping. Metric-compatible fallbacks tuned with size-adjust, ascent-override, and line-gap make the swap geometry-neutral.
When to optimize
Headlines and body copy on content sites. Preload only the one or two fonts above the fold, subset to needed ranges, self-host for header control, and choose optional for non-brand-critical text.
Pitfalls
Every swap is a potential layout shift, feeding CLS unless fallback metrics match. Late fonts after optional expires never apply on that view, so brand police can object. Blocking periods still show blank text on very slow first connects — pair display choice with aggressive preloading of critical weights.