On a slow connection a web font delays text and shifts layout when it replaces the fallback. @font-face and Web Fonts and Variable Fonts cover @font-face, font-display and variable fonts. Budget one or two WOFF2 families (system-ui costs nothing), use font-display: swap, and match the fallback's metrics so the swap moves nothing. size-adjust is widely available; ascent-override is not yet Baseline and is simply ignored where unsupported:
@font-face { font-family: "Inter Fallback"; src: local("Arial");
size-adjust: 107%; ascent-override: 90%; }
body { font-family: "Inter", "Inter Fallback", system-ui, sans-serif; }The percentages differ per font pair; fontaine 1,992 (github.com/unjs/fontaine (https://github.com/unjs/fontaine 1,992 ), npm 2,036 install -D fontaine, MIT) computes them and generates the fallback faces as a Vite 25,978 , webpack 3,824 or PostCSS 238,379 plugin.