How to match fallback fonts via metric comparison
- Step 1Capture metrics for both fonts — Run the Metrics Analyser on your web font (Inter) and your fallback (Arial). Capture UPM, ascender, descender per font.
- Step 2Compute the override descriptors — ascent-override: (web ascender / web UPM × 100)%. descent-override: same. size-adjust: (fallback x-height / web x-height × 100)%. Output: a fallback @font-face declaration with overrides.
- Step 3Use the matched fallback — Define a @font-face for the fallback with the calculated overrides. Use it as the second item in your font-family list. During the brief moment before the web font loads, the fallback occupies the same vertical space — zero CLS.
Frequently asked questions
Why not just use the same line-height?+
line-height controls space between lines, not glyph metrics. A taller-ascender web font occupies more pixels per line at the same font-size; the fallback occupies fewer. Same line-height, different visible space — CLS.
What about iOS Safari pre-15.4?+
size-adjust shipped in Safari 15.4 (March 2022). Older iOS Safari ignores the descriptor. Acceptable degradation: CLS during swap, smaller than without overrides on modern browsers.
Can I use real font metrics or do I need to estimate?+
Use real metrics from the Metrics Analyser — estimating produces visible CLS. Common system fonts: Arial UPM 2048, Helvetica UPM 1000. The Analyser surfaces the exact values for any installed system font you can grab from your OS.
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.