FOUT

FOUT is the flash of unstyled text: the page paints in whatever face the stack falls through to, the file lands a moment later, and every line is set again in it. font-display: swap asks for this by name, cutting the block period to zero and leaving the swap period open for as long as the download takes. The reader gets words at first paint, which is the whole argument for it, and pays for them with a second layout of the same text.

The cost is not the change of face, it is the change of metrics. Two faces at the same declared size rarely share an x-height or an advance width, so the swapped line is a different length, wraps at a different word, and drags everything below it up or down. On a long page that reflow is the single biggest contributor a font makes to cumulative layout shift, and it lands exactly when the reader has started reading. The fix is to make the two faces measure the same rather than to hide the moment they trade places: declare a local fallback font in its own @font-face rule and tune it with size-adjust, ascent-override, and descent-override until the stand-in occupies the space the real face will. Done well, the swap is a change of drawing with nothing moving around it.

The sibling failure is FOIT, which hides the text instead and buys a still page at the cost of a blank one. Between the two extremes sit fallback, which allows a brief block period and then a short swap window before settling on the stand-in for good, and optional, which will drop the file rather than ever swap. Which one is right is a content question: an article wants the words early and can absorb a tuned swap, while a logotype or an icon face usually cannot afford to be seen in the wrong drawing at all. Web font holds the full set of strategies these two are the visible halves of.