# Lazy-load web fonts to improve first paint performance

DevFeed: [Lazy-load web fonts to improve first paint performance](<https://devfeed.tech/articles/web-fonts-boy-i-don-t-know-35554.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/web-fonts/>)

Author: Monica Dinculescu

Published: 2016-11-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web](<https://devfeed.tech/topics/web.md>), [browser](<https://devfeed.tech/topics/browser.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [loading](<https://devfeed.tech/tags/loading.md>), [performance](<https://devfeed.tech/tags/performance.md>), [web-fonts](<https://devfeed.tech/tags/web-fonts.md>)

## AI overview

This article argues that web fonts should not block initial text rendering. It explains FOIC and FOUC and recommends lazy-loading fonts so content can appear before font styling finishes.

## Source excerpt

phantom underlines. isn't this amaaaaaazing. i love waiting for 8 seconds and seeing this. look at it. srsly. looooookat it. I spent a week traveling around Taiwan, on my awesome free roaming 2G data plan, and friends, we need to talk about your web fonts. Also cats. They really love cats there. Anyway, the thing about 2G is that I fully understand that it will take me 10 seconds to load a page. What sucks is the fresh rage of the following 4 seconds where instead of content I get phantom underlines, waiting for a slightly-different-sans-serif to download. Listen: it doesn't have to be this way. You can lazy load your font. It's 4 lines of JavaScript. 7 if you're being ambitious. Why should you care I've been brainwashed to really care about first paint performance (thanks Chrome Dev Rel 😘), and I've become a big fan of the "do less & be lazy" approach to building things. What this means is that if something is not on your critical path, it probably doesn't need to be the first thing you paint on a page. Now think about fonts: is the critical path showing text, or styling it? I'd argue that unless your app is in the 1% it's-all-a-magical-visual-experience bucket (in which case this post is not for you), or we're just talking about the fancy title on your site (which fine, can be slow to paint or whatever), it's probably trying to communicate some content, and ugly content (that you prettify after) is better than no content. (Real talk: if you don't think rendering text is a critical path, you're whack and we need to have a chat.) There are two things you can run into when loading a web font: FOIC ("flash of invisible content") - when your browser sees that you're trying to use a font it doesn't have it paints all the text in invisible ink, waits, and when it finally gets the font, it re-paints and re-layouts the text correctly. [see a gif of this] I hate this with the fire of a thousand suns, because instead of looking at actual content, I'm looking at bullets and u