Font Display is an interesting property that was added to Google Fonts years ago. However, it was never widely used within the WordPress community. Now that it’s use is becoming more widespread, I am going to explain what the font-display property is, it’s various options, and why I prefer Font-Display Swap.
So, before we go into how this property works let’s first go over how the browser renders fonts in the first place.
How Web Fonts Work In The Browser
Font Loading is a tricky issue. Fonts load in two ways, both of which have their own separate issues; they are dubbed FOUT (flash of un-styled text) and FOIT (flash of invisible text).
Flash Of Un-Styled Text is where the text renders in the browser as a system safe font and then when the font file has been downloaded it will load your web font. This is the preferred action over a FOIT (in my opinion).
Flash Of Invisible Text is the default behavior if you’re using a web font. The system will not show the text at all until the font file is downloaded. This has serious repercussions for users on mobile devices or on slower connections. By default most browsers will keep the text invisible for up to three seconds and after that it will swap it to a system font.
So, how can we fix this without complicated JavaScript workarounds? Well, that is the font-display property.
Throwing The Book At Font-Display
Font Display is a CSS property that is supported in Firefox, Chrome, and Opera, etc. With Font-Display, we are able to control the rendering behavior of text rendering by including the property inside of a @font-face property.
So, let’s look at the various values that font-display supports.
Auto: This is the default browser behavior. Declaring this rule, the browser will continue deciding what to do. In fact, you don’t even need to declare this rule you can simply not include it and get the same effect.
Swap: Swap is my favorite value. Swap forces the browser to use a fallback font immediately and then when the web font have been downloaded it will swap back to that font. This is the recommended option for most fonts typically, including all of your Google Fonts.
Block: Block will almost never be used. It will essentially block the rendering of the text indefinitely.
Fallback: This is value is a mix between Swap and Block. There will be a short period (100ms), that the text will be invisible. If the fonts have not downloaded yet, then the browser will swap to a system font and then after the font has been downloaded it will swap to the font. This is great when you want to avoid a FOUT, but the text rendering is still slower than Swap.
Optional: This is very similar to fallback in that the text will be invisible for a short period (100MS) and then transition to a fallback if your font files have not completed loading.
Cool, so how do I use it?
If you’re using the inline @font-face rule for loading a font file it’s going to look something like the following.
@font-face {
font-family: "";
font-weight: 400;
font-style: normal;
src: url("") format("woff2");
font-display: swap;
}You can then replace the swap value with anything you want (I recommend swap).
If you’re looking to use it for Google fonts all you need is to append the following to your font URL.
display=swap
Example
https://fonts.googleapis.com/css?display=swap&family=Montserrat%3A600%7CHind%3A400
Wrapping It Up
In most situations, it’s best to simply use swap. The font-display property is widely supported and if users encounter it in a browser that doesn’t support it, the default behavior will remain.
Google Fonts does support the property and it can be integrated easily for improved render performance.
