perf/font-woff2

Dlaczego

WOFF2 is the best-compressed font format and every current browser reads it. A TTF or OTF file of the same font is often two or three times larger, and EOT and SVG fonts exist only for browsers that are long gone, so they cost download time on the text the page is waiting for.

Poprawka

Convert the font to WOFF2 (check that its licence allows web use and conversion) and list only url("font.woff2") format("woff2") in src. Subset it to the characters you use while you are at it.

Przykłady

/* bad */
@font-face { font-family: "Brand"; src: url("brand.ttf") format("truetype"); font-display: swap; }
/* good */
@font-face { font-family: "Brand"; src: url("brand.woff2") format("woff2"); font-display: swap; }

Źródła

• web.dev, Best practices for fonts (font compression)
• MDN, src descriptor of @font-face

Przeczytaj w terminalu

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