perf/font-fallback-metrics

Why

With font-display: swap the page first renders in the fallback font and re-renders when the web font arrives. If the two fonts have different widths and line heights, every line rewraps and everything below moves, which shows up as layout shift (CLS).

Fix

Define a fallback @font-face on a local font with size-adjust (and ascent-override, descent-override, line-gap-override where supported) tuned to the web font, and list it right after the web font in font-family. next/font (adjustFontFallback) and @nuxt/fonts generate this for you. Check that the overrides are supported in the browsers you target; size-adjust is the widely supported one.

Examples

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

Sources

• web.dev, Optimize Cumulative Layout Shift (web fonts)
• MDN, size-adjust descriptor
• Next.js, Font optimization (adjustFontFallback)

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/font-fallback-metrics