Guidelines · WSG 2.11
Use optimized web typography
Fonts are render-blocking by default and easy to over-ship: four weights of two families is common, and most of it is never seen on the page that loaded it.
How to satisfy it
- Prefer a system font stack where the design allows it: zero bytes, instant render.
- Subset custom fonts to the characters the site actually uses.
- Ship WOFF2 only. Older formats are dead weight for browsers that all support WOFF2.
- Use font-display: swap so text is readable before the font arrives.
Measured pages failing this guideline
From the 60 most recently measured pages. Each links to its full report.
- www.smithsonianmag.com23 font files total 1.22 MB.0.410 g CO₂e · 4.46 MB · about 428 kB recoverable
- openrouter.ai7 font files total 441 kB, 2 not in WOFF2.0.622 g CO₂e · 6.83 MB · about 204 kB recoverable
- yadyok.bogazici.edu.tr24 font files total 575 kB.3.28 g CO₂e · 29.49 MB · about 201 kB recoverable
- bogazici.edu.tr22 font files total 567 kB.1.53 g CO₂e · 13.74 MB · about 199 kB recoverable
- webrazzi.com3 font files total 565 kB.0.266 g CO₂e · 2.86 MB · about 198 kB recoverable
- freeink.org5 font files total 422 kB.0.055 g CO₂e · 608 kB · about 148 kB recoverable
- about.gitlab.com2 font files total 404 kB.0.225 g CO₂e · 2.47 MB · about 142 kB recoverable
- www.flickr.com14 font files total 380 kB, 2 not in WOFF2.0.665 g CO₂e · 5.90 MB · about 137 kB recoverable
- www.cnn.com5 font files total 319 kB.1.79 g CO₂e · 15.89 MB · about 112 kB recoverable
- mun-logadan.github.io2 font files total 312 kB.0.066 g CO₂e · 594 kB · about 109 kB recoverable
- www.nytimes.com12 font files total 301 kB.1.69 g CO₂e · 14.83 MB · about 105 kB recoverable
- www.netlify.com6 font files total 285 kB.0.295 g CO₂e · 2.63 MB · about 100 kB recoverable