Our own site uses two typefaces. One variable file for everything you read, from the poster-sized headline to the footnotes, and one monospace for labels. Total: about 90 kilobytes, cached after the first page. That is the whole type system for a site people call “very typographic”.
Most sites we audit load between 300 and 600 kilobytes of fonts, and use four of the twelve weights they downloaded.
Variable fonts changed the maths
A variable font carries every weight, and often every width, in one file. Archivo, the face on this site, gives us condensed capitals at 800 for the headlines and an extended 600 for tiny labels from the same download. In 2018 that would have been five files.
The design benefit is bigger than the performance one. With a width axis, the headline and the label are visibly the same family, and the page reads as one voice.
Subsetting is not optional
A full font file includes Cyrillic, Vietnamese and Greek that an English site never renders. We subset to the character set the content actually uses, plus punctuation and the euro sign. That typically halves the file.
Fontsource packages, which we self-host, already split by script with proper unicode ranges, so the browser only fetches the Latin block. The one thing we never do is load from a third-party font service: it adds a connection, a privacy question and a dependency on someone else’s uptime.
Loading order
Fonts are preloaded, one file each, with font-display: swap so text appears immediately in a fallback. The fallback is tuned to the same metrics as the web font, so the swap does not shift the layout. Cumulative Layout Shift on our launches this year: 0.01 or below, every one.
The rule
Two families. One variable file each. Subset to the content. Self-hosted. And when a design review asks for a third face for a pull quote, the answer is usually that the second one has an italic.
