This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
CO₂ & EmpCo
How many font files does a website need?
A font file usually contains one style of a typeface: regular, bold, italic or semibold. Themes often load all the styles a typeface offers, even if the page shows two of them. The check counts the transferred font files and their KB. If there are at least 6 files with at least 300 KB together, the finding is raised; it also names how many styles the page uses.
How the check counts
Every transferred WOFF2, WOFF, TTF, OTF or EOT file counts as a font file. For the styles in use, the check reads the first font family with weight and style for headings of levels 1 to 3, paragraphs, links, list items, text spans, buttons, labels and table cells, for the first 400 of these elements. The finding names both numbers, for example 9 files for 3 styles in use.
What fonts cost besides bytes
Font files can delay the text display: without font-display, most browsers hold back the text for up to three seconds until the font has loaded, and then show a fallback font. The Performance audit area reports this separately. Few, small font files help the CO₂ value and the loading time at once.
Variable fonts and subsets
A variable font contains all weights in one file. Instead of one file per weight, the page loads one that is often as large as two to three individual styles. A subset limited to the characters of the website’s languages, such as Latin with umlauts, makes the file smaller still.
Examples
Embedding
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600;1,700">@font-face {
font-family: "Open Sans";
src: url("/schriften/open-sans-latin-var.woff2") format("woff2");
font-weight: 300 800;
font-display: swap;
}- Find out which styles the page shows: usually regular and bold, sometimes italic.
- Remove all other styles in the theme or in the font embedding.
- Where possible, use a variable font in WOFF2 format.
- Limit the characters to the languages of the website: download a subset (with Google Fonts, for example, “latin”) or trim the font with a tool such as pyftsubset. Combine several subsets with unicode-range.
