perf/font-display

Dlaczego

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.

Poprawka

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.

Przykłady

/* 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; }

Źródła

• MDN, the font-display descriptor
• Chrome for Developers, Ensure text remains visible during webfont load
• web.dev, Best practices for fonts

Przeczytaj w terminalu

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