Performance

`perf/font-display`

Every @font-face and Google Fonts URL sets font-display (swap or optional) so text is visible while the font loads.

Why

Without font-display, browsers may hide text for up to a few seconds while a web font downloads, so the page looks empty and the Largest Contentful Paint can wait for the font.

Fix

Add font-display: swap to show fallback text at once, or font-display: optional when you would rather keep the fallback than shift the layout. Pick a fallback with similar metrics, or adjust it with size-adjust. For Google Fonts, add &display=swap to the stylesheet URL.

Examples

/* bad */
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); }
/* good */
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); font-display: swap; }

Sources

Facts

Id: perf/font-display
Severity: minor
Check: static checked in the source by audit
Applies to: css scss less html vue svelte astro
Same problem in: Lighthouse font-display-insight
Taught by the skill: fe-fonts Web fonts
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/font-display