Font-loading strategy determines the form of text flash
Aliases: font-display · font preload · FOIT · FOUT
What it is
Web fonts are not ready with the HTML. During that gap the engine follows the loading strategy you picked: paint nothing then reveal, paint a fallback then swap, or give up and never swap. Strategy is the combination of font-display, preload, unicode-range request cadence, and whether the file sits on the critical path. The flash form is an output of that strategy, not a visual taste chosen after the fact. FOIT (flash of invisible text) and FOUT (flash of unstyled text) name two reveal schedules the strategy has already selected. They are not a preference you settle once the file arrives.
Why it happens
Text nodes can join layout once DOM and CSSOM exist. Which typeface supplies glyphs depends on whether the @font-face is usable yet. font-display: block withholds glyphs during the block period, so the first screen looks like missing text, then paints—FOIT’s schedule. swap paints fallback immediately and replaces when the web font lands—FOUT’s schedule. optional uses the web font only if it is cached or arrives inside a tiny window; otherwise the fallback stays and a second paint may never happen. preload moves the race’s start earlier and shortens the gap; it does not cancel the reveal rule the strategy named. unicode-range splits files by code point, so Latin can swap before CJK and the same paragraph changes typeface in stages.
What you see is the strategy orchestrating when to paint, which face to paint with, and how many paints. Changing strategy changes form. Stretching the same strategy only lengthens that form; it does not turn it into another.
Where it stops holding
System UI fonts and a user-installed face of the same name have no network gap, so strategy has no flash to choose. Print and PDF usually wait until fonts are complete; the screen schedule does not apply. Icons drawn as SVG or inline paths do not go through text font loading. Mail clients and some WebViews ignore font-display, so the strategy is a no-op in those shells. Offline with the file already cached, the gap is zero and every strategy looks like “no flash.”
Applying it
- Decide which reveal the gap is allowed to show—block, immediate fallback, or optional—then pick the matching
font-display. Do not let the engine default silently choose. - Give first-screen titles and body different strategies: preload titles to shrink the gap; do not block a long article on the whole package.
- When splitting by
unicode-range, make the first subset cover characters actually on the first screen, so the screen does not FOIT and then swap again on CJK code points. - Verify with a cache-disabled cold load: record text from frame one to stable glyphs, and check it against the written strategy. If the form and the strategy disagree, the strategy did not take.