DEV Community

loading...
Cover image for CSS Font-display and how to use it

CSS Font-display and how to use it

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

Yesterday we included a custom Google Font on our website and briefly mentioned the font-display option.
Let's dive deeper into what it is and how it works.

As we saw yesterday, custom fonts tend to load slowly and block the browser from defining when your website is ready.
This, in turn, makes Google think your website is slow, and nobody wants that.

So in modern browsers, we can use the font-display function.

Font Display options

  • auto: This is the default value, and leaves the decision up to the browser, in most cases, it will be block
  • block: This tells the browser to hide the text until the font has fully loaded. This is the flash you see when it swaps on some sites.
  • swap: Swap, as the name suggests, will start with the fallback font and swap once the font is loaded.
  • fallback: This is a compromise between auto and swap. It will start with hiding the font for a brief period and then go into the swap routine.
  • optional: This is much like the fallback method. It tells the browser to start with a hide and then transition into the fallback font. The nice option here is that it allows the browser to see if the custom font is even used at all. If, for instance, a slow connection appears, they are less likely even to see the custom font.

How to use font-display

As seen in the previous example, we can use it as such:

h1 {
  font-size: 40px;
  font-family: 'Amatic SC', cursive;
  font-display: swap;
}
Enter fullscreen mode Exit fullscreen mode

What is a fallback font?

So we talked about fallback fonts quite a bit, but what are those even?

h1 {
  font-family: 'Amatic SC', 'Times New Roman', Times, serif;
}
Enter fullscreen mode Exit fullscreen mode

So in the above example, the custom font is Amatic SC the system font is Times New Roman or Times, so in the case of using swap, we will first see Times New Roman and when the custom font has loaded it will show Amatic SC.

Browser Support

Not all browsers support this, but I encourage you to use font-display. The browsers that don't support it will decide for you.

3d transform support

Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion

pic
Editor guide
Collapse
joelbonetr profile image
JoelBonetR

Nice post. Good information to use in views to increase performance and SEO due to google pagespeed insights recommendations.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Thanks, yes I do think the speed of the web could be way better, but we got so spoiled in hardware that we hardly care anymore.