How to apply font-display strategies in build pipelines
- Step 1Encode strategy in tokens — fonts.config.json: { 'Inter-Hero.woff2': { 'fontDisplay': 'swap', 'critical': true }, 'Inter-Body.woff2': { 'fontDisplay': 'optional' } }. Per-font strategy explicit.
- Step 2Emit @font-face with right value — Build script reads the config, generates @font-face blocks with the correct font-display per font. Output to dist/fonts.css.
- Step 3Validate in CI — Lint the output: every @font-face has font-display set. Strategy file changes show up in PR review for explicit acknowledgement.
Frequently asked questions
Should I always set font-display?+
Yes — never omit. Default behaviour (auto) is browser-defined and usually means block (FOIT). Always pick explicitly: swap, fallback, or optional. The Builder forces this — no font-display value defaults to swap, never auto.
Can different fonts have different strategies?+
Yes. Hero font: swap. Body font: optional. Code font: swap. Each @font-face declaration can have its own font-display value. The Builder respects per-font strategy from the config.
Does font-display affect Lighthouse?+
Indirectly — by reducing invisible-text time, swap improves LCP. Lighthouse audits whether font-display is set; missing the descriptor flags as 'avoid invisible text'.
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.