font-display: swap shows the fallback font immediately and swaps when the webfont lands. Honest, and it causes the layout quake you have seen a thousand times: text reflows mid-read, a headline nudges, a button under it moves. The metric overrides solve this by faking the swap.

@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  font-family: "Gloock", "Gloock Fallback", serif;
}

Why metric overrides fix the reflow

  • size-adjust scales the fallback so its rendered widths land near the webfont's; the swap moves only a few characters.
  • ascent, descent and line-gap overrides pin the fallback's vertical metrics to the webfont's, so line boxes stop resprining.
  • local() sources a font the user already has, so the fallback never downloads; the whole trick adds zero bytes.
  • The webfont itself keeps font-display: swap, so first paint never waits for a font file at all.

Deriving the numbers honestly

  1. Load the webfont and the fallback side by side on a test page, then adjust the four overrides until both strings occupy the same box; the browser devtools paint flashes show exactly which metric is off.
  2. The fontTools community has a tooling path for deriving size-adjust automatically from two font files; hand-tuning per pair is also three minutes.
  3. Re-derive when either font changes; a metrics table is data, and data needs an owner.
  4. Test the CLS number in Lighthouse before and after; this site's reflow stopped measured at zero on the headline shift.

Fonts are the one resource a page loads before it can paint its own text, and the fallback metrics are the only honest way to make that load invisible. gacor typography engineering with no JavaScript anywhere.