Load fonts without moving the page

How to do it

Self-host WOFF2 variable fonts. Split them by unicode-range, so most pages load only a small core file. Add @font-face fallbacks with size-adjust, ascent-override and descent-override. Use font-display: optional on long text, and swap only where you measured no shift.

Example

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF;
  font-display: optional;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}
body { font-family: "Inter", "Inter Fallback", sans-serif; }

How to check

CLS stays 0 on your longest pages. Block the fonts in DevTools and check that the page still looks right and paints as fast.

Measured

On a reference site, swap gave no shift on a short home page. On long pages, text re-wrapped when the fonts arrived, and CLS went from 0 to 0.226 (desktop) and 0.123 (phone). With optional, every page measured 0.