Control web typography with CSS font display

Loading custom web fonts for the first time incurs a performance penalty on a web page. As web developers and designers, we always strive to create beautiful and performant websites. However, often these two goals clash. The CSS property font-display enables a better balance between aesthetics and performance.

With font-display, you can give your browser hints about what font-loading strategy to use – for example, the importance of your web font, and how a system font fallback should be used in the case your web font download takes too long. You can add the font-display property to your @font-face rules.

Fallback

If you specify a font-display property value of fallback, the browser will wait less than a second for your custom web font to download. If the custom font is not ready by this time, a fallback (hence the name of this property value) will be used for the lifetime of the web page. This is great for the user, since they won’t be staring at ‘blank’ text for very long.

The catch, of course, is that your shiny web font will not be used for that initial page load, which can potentially impact the look and feel of your website layout. font-display: fallback is pretty strict: if your web font finishes downloading after the deadline, it still won’t be used.

Swap

If your custom web font is critical to the design of your site, there may be a better option for you. font-display: swap will immediately use a fallback font. At this point, as soon as your web font download has finished, be it after one second or five, the browser will swap the fallback font with your desired web font. It’s worth noting, though, that the font swap can be jarring for the user, especially if they’re already focused on reading the text.

Block

Finally, if you decide your web font is of high importance, font-display: block might be an option. This hints to the browser it should wait for quite some time (three seconds normally) to download fonts. During this period, the user will not see any text. After these three seconds, a fallback is used.

From this point, no matter how long the web font takes to download, the browser will still swap the newly downloaded font with the fallback font, even if the user has started scrolling and reading your page.

What should I use?

If perceived performance is a big deal and you’re not too fussed over custom fonts, font-display: fallback offers a nice user experience. If eventually displaying your custom web font is important, then swap or block might be for you.

Keep in mind that no matter what option you go for, testing this behaviour on throttled connections is hugely important.

This article originally appeared in net magazine issue 285; buy it here!