How to @font-face best practices for 2026
- Step 1WOFF2-only src list — @font-face { src: url('/fonts/inter.woff2') format('woff2'); ... }. Single format. 99%+ support; the missing 1% (IE11, ancient mobile) sees the system font fallback.
- Step 2font-display strategy — Branding fonts (logo, hero): font-display: swap (visible immediately, swap when loaded). Body fonts: font-display: optional (use only if cached/fast). Drop block, fallback, auto.
- Step 3Add size-adjust + ascent-override — Define a fallback @font-face for the system font with size-adjust and ascent-override calculated from your web font's metrics. The browser uses the matched fallback during load — zero CLS when the web font swaps in.
Frequently asked questions
Why WOFF2-only?+
WOFF2 has 99%+ support (Chrome 36+, Firefox 39+, Safari 10+). Multi-format src lists were a 2014 best practice that's now cargo-culted. Drop them.
When should I preload fonts?+
When the font is on the LCP path (hero typography, headlines, body text on text-heavy pages). Preload one critical font per page; preloading more competes for early bandwidth.
What about font-display: optional?+
Optional uses the web font only if cached (or arrives within ~100ms). Otherwise sticks with the fallback for the session. Eliminates FOUT for body text where late swap is jarring.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.