Custom fonts are part of a brand, and nobody wants to give them up. But each family, weight and style is usually a separate file, and themes often load more of them than the page uses: a light, regular, medium, semibold and bold of two families, plus italics, plus character sets for languages the site never shows. Every one of those files is data your visitors download, and data is what a website carbon estimate measures.
Count what you load
In Chrome DevTools, open the Network panel, tick “Disable cache”, choose the “Font” filter and reload. You'll see each font file, where it comes from and its size. Then compare with what the design actually uses: if the page only shows regular and bold, the light and medium files are dead weight.
Load fewer files
- Keep the weights you use. Remove unused weights and styles from your theme or font embed code.
- Consider one family. A single family used at two weights often looks more consistent than two families, and halves the number of files.
- Use system fonts where the brand allows. Body text set in the device's own font downloads nothing at all.
- Look at a variable font if you genuinely need many weights: one file can cover a range of weights. It is usually larger than a single static weight, so it only helps when it replaces several.
Make each file smaller
- Use WOFF2. Google's guidance is that WOFF2 offers the best compression and is often the only format modern browsers need; older formats are for legacy browsers.
- Subset. A full font can contain thousands of characters. Limiting it to the languages your site uses (for example Latin) can make it much smaller. Google Fonts supports this with its
subsetandtextparameters; for self-hosted fonts, tools such as glyphhanger or subfont do the same.
Load them sensibly
- Self-host where you can. web.dev notes that in most cases self-hosting web fonts is faster than downloading them from another domain. It also means one less third party receiving each visit (see how third-party tags affect a carbon test). Serve them with long cache lifetimes so repeat visits download nothing.
- Choose
font-displayon purpose.swapshows text straight away in a fallback font;optionaluses the web font only if it arrives very quickly, which avoids layout shifts and can mean some first-time visitors never download it. - Preload sparingly. Preloading the one font used above the fold can help it appear sooner, but preloading many fonts competes with more important files.
These changes rarely affect how the page looks, and they make text appear sooner. Under the Sustainable Web Design Model v4, each megabyte removed lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green). Check your page to see the total before and after.
