perf/font-fallback-metrics

Dlaczego

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).

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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