Web Font Optimization at NerdWallet

Francis John
Sep 19, 2017 · 5 min read

Goal

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

Results

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

Resources

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