Fonts Are Probably Slowing Down Your Site
A site loading four font families at five weights each is downloading hundreds of kilobytes before a single word appears, and then re-rendering the whole page when the files arrive. This is one of the easiest wins available, and it does not require giving up good typography.
The three costs
- Download weight. Each family and weight is a separate file. Italic variants double it again.
- Render blocking. Text may be invisible until the font loads, which delays the moment your page becomes readable.
- Layout shift. When a fallback font is swapped for the real one, text reflows and the page jumps, which is both irritating and a measured penalty.
The fixes, in order of return
- Cut the number of weights. Most sites need regular and bold, plus one display weight. Six weights of a body font is a design habit, not a requirement.
- Self-host rather than loading from a third party. It removes a connection to another domain and gives you control over caching. It is also the simpler answer to privacy rules in some regions.
- Use modern formats. WOFF2 only, in almost all cases, and drop the legacy fallbacks.
- Subset the character set to the languages you actually publish in. This alone can cut a font file substantially.
- Set font-display to swap so text renders immediately in a fallback rather than staying invisible.
- Preload the one or two fonts used above the fold, and only those.
- Match the fallback's metrics to the web font so the swap moves text as little as possible.
The option people forget
System font stacks cost nothing, load instantly, and look native on every device. For a site where typography is not part of the brand's differentiation, they are a legitimate choice rather than a compromise. Reserve custom fonts for headlines, where the character matters, and let body text be fast.
How to check
Open the network panel, filter to fonts, and reload. Count the files and add up the weight. If you find more than three files or more than about 150KB, there is an easy improvement waiting.
