Metric mismatch between fallback and target shifts the layout after load

What it is

A fallback paints first. The custom face arrives, and advance widths, body height, and line boxes can all change. Lines already wrapped rewrap; a button below is shoved. That is metric mismatch showing up as layout shift, not a light “prettier face.” FOUT made the words visible early. This jump is the bill.

Why it happens

A face is a set of numbers: x-height, ascender, widths, default line gap. When two faces’ numbers disagree, the same character sequence occupies a different box. Swapping faces replaces a laid-out run with another set of boxes, and everything after it is recomputed. If the user is mid-tap on the button that just moved, the tap lands on whatever slid in. Shift scales with how far the metrics diverge and with how much area the run covers: a few nav words jump a little; an article jumps a screen. The remedy is not a return to invisible waiting. It is to bring the two faces’ metrics together — pick a fallback with similar numbers, or override metrics (size-adjust, ascent-override) so the fallback pretends to occupy the target’s boxes. Then the swap changes outlines, not boxes.

Where it stops holding

Two files from the same family (a variable axis, a web cut and a system cut of one design) can jump too little to see. Blocking until the custom face arrives means there is no swap and so none of this shift — that is FOIT paying instead of CLS, not metrics being fixed. Icons and absolutely positioned wordmarks that are out of flow can jump without shoving neighbours. A swap during a scroll can be masked by the scroll itself; once the user stops to read, the paragraph still feels as if it slid.

Applying it

• Name a metrically close fallback for body copy, or write metric overrides on the @font-face so line width and line count barely change across the swap.
• Capture two frames around the swap and overlay them. If line ends and the button below have moved on the first screen, fix metrics before reaching back for a long invisible wait.
• Accept on shift: arrival of the custom face must not move the primary button out of its previous hit location.

Related

• Same group: F4.15.1 Text during a custom-font load needs an explicit display strategy · F4.15.2 A long invisible wait hurts more than painting a fallback first · F4.15.4 When a webfont fails, a system face must catch — not a blank
• Nearby: F4.02 Leading · F4.07 Typeface choice
• Search terms: CLS · font metrics · size-adjust