The hidden weight of web fonts
Beautiful typography can be expensive in performance if you're not careful. Here's how I keep fonts crisp without dragging down load time.
A poorly handled font means several hundred kilobytes, text that jumps on load, and a performance score that drops. Yet typography remains one of the strongest levers of an identity.
Three rules I apply every time: only load the weights actually used, serve files as WOFF2, and preload the primary font to avoid the flash of invisible text.
Subsetting changes everything. A font file often holds hundreds of characters for alphabets you'll never use. Keeping only Latin can cut the weight by three or four.
Variable fonts are another weapon: a single file covers every weight of a family. As long as you use at least three, it's almost always lighter than loading each weight separately.
On the fallback side, I always define a coherent system font stack. If the custom font is slow, text stays readable in a close typeface, without a brutal layout shift once the real font arrives.
I also avoid stacking too many families. Two well-chosen typefaces, sometimes three, are enough to build a clear hierarchy. Beyond that, you gain clutter and lose coherence.
The right instinct: ask whether every kilobyte of font truly serves the message. If the answer is no, it goes.