Your LCP element is a headline set in a self-hosted web font. How do CSS font-display: block and font-display: swap move Largest Contentful Paint and Cumulative Layout Shift in opposite directions, and how do you decide between them?

## Why a font choice shows up in two different metrics Web fonts sit exactly on the seam between the two loading vitals. Largest Contentful Paint asks *when did the biggest thing paint*; Cumulative Layout Shift asks *how much did already-painted content move afterwards*. A font that arrives late can either delay the paint or move it after the fact, and the `font-display` descriptor is what decides which of the two you pay. The crucial fact for LCP is that **text that is not painted is not a contentful paint**. If the browser is deliberately rendering a headline invisibly while it waits for a font, that element contributes nothing to LCP yet. Whatever else is on screen becomes the current LCP candidate, and when the text finally appears — often as the largest element on the page — a new, much later LCP is recorded. The crucial fact for CLS is that **layout shifts are collected for the whole page lifetime**, not just the first few seconds. A font swapping in at four seconds still counts. CLS scores the shifts in session windows and reports the worst one, and shifts within roughly half a second of a user interaction are excluded as user-initiated — but nothing excuses a shift simply for being late. ## What each choice does to the numbers **Blocking behaviour.** The headline is laid out but painted invisibly while the font loads. LCP for that element cannot be recorded until the font arrives or the browser gives up and uses the fallback. On a fast connection this looks fine; at the 75th percentile on mobile, where the font may be a third-party origin needing a fresh connection, your LCP inherits the font's entire critical path. The upside is that the user never sees two different typefaces, so this path contributes essentially no font-induced layout shift. **Swapping behaviour.** The headline paints immediately using the next font in the `font-family` stack. LCP is recorded early, on the fallback paint, and is usually excellent. Then the web font arrives, the text is re-rendered with different glyph advance widths, x-height and line height, and the block can change height — wrapping from three lines to two, or vice versa. Everything below it translates, and that translation is scored into CLS. If the swap also grows the text block substantially, the browser may additionally report a new, later LCP candidate for the same element. ## The move that gets you both The framing "pick your poison" is the mediocre answer. The strong answer is that the swap-induced shift is a *metrics mismatch* problem, not an inevitability: the shift exists because the fallback and the web font occupy different amounts of space. Closing that gap — choosing a fallback whose metrics are close, and tuning the fallback's metrics so the two typeset nearly identically — collapses the shift toward zero while keeping the early paint. Then swap is simply better on both vitals, and you have no tradeoff left to argue about. A second lever is making the font arrive before the deadline matters at all: self-host it on the document origin so there is no extra connection, ship only the weights and glyph ranges the page uses, and let the critical text font be discovered as early as possible. A font that lands in 200 ms makes the whole block-versus-swap argument academic. ## Diagnosing which one is actually hurting you Field data settles it. If LCP is poor and the LCP element is a text block, look at whether the text is being withheld: a large gap between first paint and LCP with no image in the picture is the signature. If CLS is poor and the shifts cluster shortly after page load with text-heavy regions moving, the font swap is the prime suspect — especially when the shift value is small but repeated across several sections. A classic false comfort is the local test. On a warm cache the font is instant, so neither the invisible-text delay nor the swap reflow reproduces. Both symptoms only appear on a cold cache and a slow connection, which is precisely the population that dominates a 75th-percentile field score. ## Where blocking still wins Some content is meaningless in a fallback. Icon fonts render as random letters, and a wordmark in the wrong face is a brand defect rather than a temporary inconvenience. For those, holding the paint is correct — but the right response is usually to remove the dependency instead: icons belong in SVG, and a wordmark belongs in an image, neither of which puts a font download on the critical path of your headline. ## The judgment to show Say explicitly which metric each option taxes, name the mechanism (unpainted text is not a paint; re-typeset text moves what is below it), then refuse the false dilemma by pointing at fallback metrics and font delivery. That progression — tradeoff, mechanism, then the move that dissolves the tradeoff — is what separates a memorized answer from an operational one.