A designer picks a typeface. Three weights, because the headings need something heavier and the captions something lighter. Then an italic. Then a second family for display.
Nobody has done anything unreasonable, and the page now downloads six font files before a single word appears.
The web font carbon footprint is that chain, followed to its conclusion. Not a reason to abandon typography, which does real work, but a reason to make the decision deliberately rather than by accumulation.
Web Font Carbon Footprint: Cut Files Without Harming UX
How a typeface becomes transferred data
Each family is a separate set of files. Each weight within it is another file. Each style, italic or otherwise, another again.
Two families at four weights with italics is sixteen files, and every one is downloaded, parsed and rendered by every visitor who has not cached them.
They also sit on the critical path. Text either waits for the font to arrive, showing nothing, or renders in a fallback and shifts when the real face loads. The first costs perceived speed, the second causes the layout to jump, which is measured as Cumulative Layout Shift and is genuinely irritating to read through.
What is actually driving the page weight
- Too many families. Two is enough for almost any site. A third is usually a decision nobody revisited.
- Too many weights. Designers specify a range and use three. The unused ones still download if they are declared.
- Full character sets. A font file typically contains glyphs for languages, symbols and diacritics your site will never render. Subsetting to what you use commonly removes a substantial share of the file.
- Outdated formats. WOFF2 compresses considerably better than older formats and is supported across current browsers. Serving TTF or legacy WOFF is sending more bytes for identical output.
- Third-party hosting. Loading fonts from an external service adds a connection to another domain before the download even begins, and self-hosting removes that round trip.
Fixing it without losing anything visible
- Audit what you declare against what you actually use. Most sites find at least one weight nobody has applied to anything.
- Subset to the characters your content needs. If your site is English-only, the Cyrillic and Greek glyphs are pure transfer.
- Serve WOFF2 and self-host. Both are straightforward, and neither changes how anything looks.
- Set `font-display` deliberately so text remains readable while a custom face loads rather than staying invisible.
Preload only the one or two faces needed for above-the-fold text. Preloading everything defeats the purpose.
The typeface option worth considering seriously
A system font stack costs nothing to download at all. Zero requests, zero bytes, instant rendering.
The trade-off is that your pages look more like everyone else’s, which may or may not matter for your business. For a body typeface on a content-heavy site, it is a legitimate choice rather than a compromise, and it is more common on serious editorial sites than most people realise.
A middle path works well: system fonts for body text, one custom face for headings. Most of the distinctiveness, a fraction of the weight.
Readability is a separate question
Font choices affect whether people can read your pages: size, line height, letterforms, and contrast against the background.
That matters, and it is not the same as the transfer question. A lighter font stack is not automatically more accessible, and a heavy one is not automatically less so. Work towards WCAG 2.1 Level AA on readability and contrast for its own reasons, and treat the weight reduction as separate work that happens to sit in the same file.
What the reduction is worth
Faster text rendering, which is the first thing anybody sees.
Where performance and environmental impact both apply, treat them as the same lever: reducing unnecessary data transfer and processing supports a faster experience while lowering estimated digital carbon, though environmental figures remain modelled rather than directly measured.
Measure your font payload before and after under stated conditions. On a site that has never audited this, the reduction is frequently large enough to be worth reporting, provided you report it accurately.
Our website sustainability audits include font auditing, which is among the quickest wins available.