Reference
What is Web fonts?
Web fonts are typefaces downloaded by the browser rather than taken from the system. They are a significant part of most sites’ critical path, and they are one of the easiest places to lose half a second without noticing.
Also called: custom fonts · font loading
The costs
- Each weight and style is a separate file, and a family with eight faces is a large download
- Fonts referenced from CSS are discovered late, after the stylesheet is parsed
- A third-party font host adds a DNS lookup and a connection before anything is fetched
- Swapping fonts after paint causes layout shift unless the fallback is metric-matched
The fixes, in order
- Use fewer weights. Two is usually enough; eight is almost never justified
- Self-host and subset to the characters you actually use
- Preload only the one face the first heading needs
- Set font-display: swap with a metric-compatible fallback
The audit worth running
List every font file the page downloads and every weight the CSS actually uses. Most sites ship faces nothing references, frequently including legacy formats no current browser will ever request.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.