Skip to content

Your web fonts are probably too heavy — here is the fix

You inherit a folder of old PostScript Type 1 fonts. Or a client sends a family with broken names, duplicate glyphs, and kerning that only works in one app. You need web fonts that load fast and look right everywhere.

Variable font components in FontLab 8

The modern answer is delightfully simple: WOFF2, subsetted, one file per family where possible. WOFF2 compresses better than anything else and every current browser understands it. Guides from DebugBear and Wholegrain Digital repeat the same checklist: convert once, subset to the characters you actually use, serve with the right @font-face syntax, and test the waterfall.

Subsetting is where most of the weight goes. A full Latin-Extended pan-European cut might be 90 KB. A subset that covers only the characters your homepage actually contains can be 12 KB. The browser does not need every Vietnamese tone mark on a marketing page that does not contain Vietnamese.

Variable fonts compound the win. Where a static family meant five separate files for five weights, one variable font handles the whole range — sometimes for less total bytes than two of the static cuts combined. The trade-off is that very small variable fonts can be larger than a single static weight; the fewer weights you use, the closer the break-even point.

In 2013 TransType 4 made the conversion side of that checklist practical. It reorganised messy families, fixed naming conflicts, generated proper web packages, and even handled early colour layers. The same problems still exist today; the tools have just multiplied. Font Squirrel’s webfont generator and Transfonter handle quick jobs well. For production families with complex features or legacy sources, a dedicated converter that preserves OpenType tables and repairs metrics remains the professional choice.

The result is measurable: fewer requests, smaller kilobytes, faster first paint. Your readers notice only that the page feels crisp and the type never janks.

References

Read more →