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!

Shipped! @GoogleFonts now let's you control web font loading using `font-display`. Say hello to the `display` parameter 🎉



What's font-display? https://t.co/Q7RDeESwkm pic.twitter.com/sn27ySza1B — Addy Osmani (@addyosmani) May 15, 2019

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

https://fonts.googleapis.com/css?family=Calligraffitti https://fonts.googleapis.com/css?family=Calligraffitti&display=fallback

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).

The types of font-display are:

font-display: block : flash of invisible text until the font loads

: flash of invisible text until the font loads font-display: swap : fallback font until custom font loads (flash of unstyled text)

: fallback font until custom font loads (flash of unstyled text) font-display: fallback : between block and swap. invisible text for a short time

: 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:

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!

Using Google Font's new display param saved us 800ms on First Meaningful Paint @addyosmani @SpeedCurve #webperf pic.twitter.com/Oa9HpXtzC3 — Josh Deltener (@hecktarzuli) May 16, 2019

Like this article? Follow @chrisoncode on Twitter