Font loading timeline
Watch font-display choose between block, swap and failure periods — and the layout shift that follows.
font-display: swap;The font block period, the font swap period and the font failure period run one after another. Which one the font file lands in decides whether the reader waits, reads twice, or never sees the face at all.
web fontMatching the fallback's metrics removes the reflow without giving up the face: size-adjust: 92.6% on the fallback @font-face closes the width gap, and ascent-override / descent-override close the line-box gap.
Period lengths are the spec’s recommendations — 3s for a short block period, 100ms or less for an extremely small one — and the spec says user agents may use different durations. Chromium and Firefox block for up to about 3s; Safari blocks indefinitely. The shift value uses the Layout Instability definition (impact fraction × distance fraction, against a 360×800 viewport with 420px of content below), but the paragraph geometry is this model’s, not a measurement. CLS sums shifts across a visit, so one swap is a floor.
Three periods, one decision
When a web font is requested, the browser divides the wait into a block period and a swap period. During the block period a pending font renders invisibly — text occupies space but cannot be read. During the swap period the fallback face is shown and will be replaced when the web font arrives. After both, the failure period begins and the fallback is kept for good.
The font-display descriptor picks the lengths of those periods: auto leaves it to the browser, block asks for a short block and infinite swap, swap for no block at all, fallback for a very short block and a brief swap, and optional for a very short block and no swap — meaning a font that arrives late is simply not used for this page view.
The shift is the cost
Swapping a fallback for a web font changes glyph metrics, so text reflows: line counts change, and everything below moves. That movement is exactly what Cumulative Layout Shift measures, and unlike an unsized image it happens after first paint, when a reader may already be reading.
The instrument reports the size-adjust value that would neutralise the shift by scaling the fallback's metrics to match the web font. Choosing optional avoids the shift entirely at the cost of sometimes not using the font at all — which is a design decision, not a performance one.