---
title: "Load fonts without moving the page · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/font-loading
updated: 2026-10-20
licence: "All rights reserved"
---

# Load fonts without moving the page

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Self-host fonts as WOFF2, subset them, and add fallback fonts adjusted to the same size. Never let a late font move the page. Use `font-display: optional` on long text, and `swap` only where you measured no shift.
- How: 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.
- 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.

Example:

```css
@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; }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/font-loading`.

- Previous: [Compress every text response](https://agentwranglers.se/playbook/website/performance/compression)
- Next: [Put the styles in the page](https://agentwranglers.se/playbook/website/performance/critical-css)
- [Performance](https://agentwranglers.se/playbook/website/performance)