HTML & CSS · Senior · Question 17 of 75
Which techniques reduce the weight and performance impact of a custom web font?
- 1Convert the font into a PNG sprite and draw the letters as backgrounds
- 2Load all weights at once so the browser caches them in advance
- ✓Correct answer: WOFF2, subsetting,
preloadof the main weight andfont-display
Explanation
WOFF2 compresses best. Subsetting removes unused glyphs (e.g. keeping only Latin and Cyrillic), and unicode-range lets the browser download only the subsets it needs. preload speeds up the main weight, font-display removes invisible text. A variable font replaces several weight files with one. In Next.js, next/font handles much of this.