Performance

`perf/font-woff2`

Web fonts are served as WOFF2; TTF, OTF, EOT and plain WOFF files are dead weight for current browsers.

moderatestaticfe-fonts

Why

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.

Fix

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.

Examples

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

Sources

Facts

Id: perf/font-woff2
Severity: moderate
Check: static checked in the source by audit
Applies to: css scss less html vue svelte astro
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-woff2