Web Font Optimization at NerdWallet

Francis John
Sep 19, 2017 · 5 min read


CSSOM/DOM constructed and first paint has happened but something is missing 🤔
That’s more like it

Some background on web fonts:

Choosing a font loading strategy


Reduce size of font files

@font-face {
font-family: 'Gotham';
unicode-range: U+0020-007F;

Eagerly load fonts


Hey that’s not bad!
Preloaded critical subset on the left, legacy font strategy on the right


Thanks to Parsha Pourkhommai

Francis John

Written by

Software Engineer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade