font-display is a CSS feature that allows us to control how we load fonts.
Table of Contents
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!
We just have to add a url parameter &display= to our Google Fonts url:
<!-- normal --> https://fonts.googleapis.com/css?family=Calligraffitti <!-- adding font-display: fallback --> 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
- 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
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