We're live-coding on Twitch! Join us!

font-display is a CSS feature that allows us to control how we load fonts.

Google Fonts are used by many websites (including Scotch.io) and up until now, we didn't have the ability to control how we loaded the fonts.

Now we can add a font-display through a url parameter!

How do I use font-display with Google Fonts?

We just have to add a url parameter &display= to our Google Fonts url:

<!-- normal -->

<!-- adding font-display: fallback -->

Why is font-display important?

Google takes performance into account when it ranks your sites. One of the things that it figures into the performance rating is: Ensure text remains visible during webfont load.

This is running a Lighthouse Audit (found in Chrome Dev Tools) without any font-display set.

Google Audits will penalize a site that doesn't show text to slow network users. By using font-display, users on slow connections can see the text of your site and then get the fancy webfont version after it loads (with swap or fallback).

What are the types of font-display?

The types of font-display are:

  • font-display: block: flash of invisible text until the font loads
  • font-display: swap: fallback font until custom font loads (flash of unstyled text)
  • font-display: fallback: between block and swap. invisible text for a short time
  • font-display: optional: like fallback, but browser can decide to not use custom font

For a more thorough look at font-display, Monica Dinculescu wrote up a fantastic post (font-display.glitch.me/) to visualize the different:

Go Forth and Use font-display!

It's a quick change to add font-display updates to your sites. After making the changes, we've seen some people get some nice performance boosts!

Like this article? Follow @chrisoncode on Twitter