Custom fonts are great—they can bring a unique look to your website and they can be a crucial part of your branding.
But what makes a custom font “custom” is that they’re not something users typically have already on their computer. For example, The New York Times uses a variety of custom fonts across different aspects of their site. Just like a user doesn’t have the images from nytimes.com saved in their browser and needs to download them from the server, the same needs to happen with the custom font files.
So what do we display when the text is available, but the custom font isn’t yet? How long do we give the custom font to load? How important is the custom font to the user experience?
Browser Defaults
By default, if the browser hasn’t loaded the custom font before, most will display text invisibly, waiting three seconds for a custom font to load. If it hasn’t loaded during that period, the text will be displayed in the fallback font. Once the custom font loads, the fallback font will be replaced with the custom font.
This can give us two potentially undesired experiences. The first is often referred to as FOIT, or flash of invisible text. For up to three seconds, your text will be invisible and unable to be read until either the custom font has downloaded, or until that window has closed and the fallback font is used. Second is a FOUT, or flash of unstyled text. This occurs when the custom font has eventually been downloaded, and the fallback text is replaced with the styled text. This flash can be distracting if a user is in the middle of reading the text when it is updated.
Let’s Take Control: The Three Parts of the Font Display Timeline
Block Period – Starting when the browser first attempts to use a font, if the font hasn’t been loaded before, the text is invisible. Text is displayed in the custom font if downloaded in this period.
Swap Period – If the custom font hasn’t loaded by now, then the text is displayed using a fallback font. If the custom font is loaded during this period, it is swapped in for the fallback text.
Failure Period – At this point, if the custom font hasn’t loaded, the fallback font continues to be used, without swapping in the custom font.
For the browser defaults mentioned earlier, the typical block period is three seconds and the swap period is unlimited, which makes the failure period never begin.
The font-display property lets us set the timing of these periods.
Font Display Values
@font-face {
font-family: 'my-font';
font-display: optional;
src: url(my-font.woff2) format('woff2');
}
Auto – Uses the browser default settings.
Block – Gives the font a short block period, usually three seconds, with invisible text if the font hasn’t loaded. If the font loads during that time, the text will become visible using the custom font. If not, the fallback font will be used. Once the fallback font is used, the browser has unlimited time to load the custom font and swap it in.
Swap – Gives the font an extremely short block period, often 100ms, until the fallback font is used. The swap period is unlimited, so the custom font will be swapped in once it loads, however long that takes.
Fallback – Has the same extremely short block period as Swap, but also a short swap period. This loads fallback very quickly, then typically allows for a three-second window for the custom font to load. If it hasn’t loaded after the swap period, it will never display as to not cause a shift in text.
Optional – Has the same extremely short block period, but no swap period. This results in a very short time (if at all) with invisible text, with no chance to swap after. This is useful when the custom font would be nice to have and is not critical. It is better for slower connections where resources are limited.
Google Fonts
For Google Fonts, Swap is the default, but you can control the display property using the display query parameter:
href="https://fonts.googleapis.com/css?family=Roboto&display=optional" rel="stylesheet">How Do I Know What to Use?
The main thing to consider is how important it is that the custom font is displayed. If it’s absolutely necessary, in the event it’s for a logo or branding, you’ll want an unlimited swap period—either Block or Swap. But since most would consider being able to read the text immediately and then experience a swap as a better user experience than waiting up to three seconds for any text to be visible, we can rule out Block in these types of scenarios.
If it’s not as crucial that your custom font is used, consider Fallback or even Optional. Fallback quickly displays text in the fallback font and has a three-second window for the custom font to be available. If you don’t want the experience of the font swapping or you want to make the first page load as fast as possible, use Optional.
For all scenarios, choose a fallback font that is similar to your custom font. This not only reduces the appearance of shifting text when the custom font replaces the fallback font, but in the event the custom font never loads, the page more closely resembles the intended experience.
Finally, remember that since font-display is a CSS property, you have control over what elements on your page use what value. The whole page doesn’t have to follow the same rules and you can even use media queries to tailor the experience for different screen sizes which might have different content above the fold, and likely a slower connection speed.
Subscribe via RSS
