The real cost of a web font
Typefaces are worth it. Here is how to pay for them without stalling the first render.
Beautiful and heavy
A well chosen typeface does more for a brand than almost any other single decision. It also arrives as a binary file that the browser must download before it can draw text in that face. Ship four weights and two styles of a full Latin family and you can easily add 400 kilobytes to a page that otherwise weighs less than that.
What happens while the font loads
Browsers handle the wait in one of two ways. They either hide the text until the font arrives, which produces a blank page with a working layout, or they draw the text in a fallback face and swap when the real one is ready. The font-display descriptor lets you choose:
swapshows fallback text immediately and swaps later.optionaluses the web font only if it is already available almost instantly, and otherwise sticks with the fallback for that page view.blockhides text for up to three seconds.
For body text, swap or optional is nearly always right. Invisible paragraphs are worse than paragraphs in the wrong face.
Reduce the payload
Subset
Most sites need a few hundred glyphs, not the thousands a full family includes. Subsetting to the characters you actually use often cuts file size by more than half.
Use variable fonts
A single variable font file can replace six static weights. It is larger than any one of them, but usually much smaller than all of them together.
Prefer WOFF2
WOFF2 compresses better than every older format and is supported everywhere that matters. There is no reason to ship anything else today.
Load it early
The browser does not discover a font until it has parsed the CSS that references it and found an element that uses it. A preload hint for the one or two files used above the fold moves that discovery to the very start of the page load. Preload sparingly: every preload competes with the HTML and CSS for bandwidth.
Match the fallback
The swap from fallback to web font causes text to reflow if the two faces have different metrics. Modern CSS lets you adjust the fallback with size-adjust, ascent-override and related descriptors so that the two occupy nearly the same space. The swap becomes a subtle change of letterform rather than a jump of the whole paragraph.
Self-host when you can
Serving fonts from your own origin avoids an extra connection to a third-party host and keeps caching under your control. Browsers no longer share caches between sites, so the old argument that a popular font was probably already cached no longer holds.
The budget
A reasonable target is two font files on the critical path, each under 40 kilobytes. That is enough for a regular and a bold weight of a carefully subset family, and it leaves the rest of the page room to breathe.