Font Display Behavior

Use font-display to control font rendering behavior.

What is font-display?

It’s a new CSS feature supported by ~70% of the browsers now. It lets you control how, visually, the fonts load. In a time when users barely wait to start reading, it’s important to control font loading.

In a perfect world, fonts would immediately show but that’s not possible as they have to be downloaded. So you have to choose between FOUT or FOIT. While designers may prefer FOIT but know that it affects readability. If the main concern of a site is reading, definitely prefer FOUT over FOIT.

Some terminology:

  • FOIT: Flash of Invisible Text
  • FOUT: Flash of Unstyled Text (Fallback Font)
  • Fallback Font: Fallback font is usually the system font or as defined in your CSS.

Best Explanation: Monica Dinculescu’s explainer

Controlling & Settings

We have added a setting to control font-display. To configure:

  1. Go to Settings > Self-Hosted Google Fonts.
  2. Under Advanced, choose your Font Display Behavior.
  3. Save and clear caches.

Meaning of each option

So which is the best option to choose?

As we mentioned in intro, it will depend on your preference. Monica’s explainer is the best resource but here’s some more technical explanation:

Swap

It’s usually the best option if readable content is the top concern. The text is shown immediately with fallback font until the custom font loads and is changed. You get FOUT.

Block

The text is invisible for a few seconds (usually 3s). It’s best if your website will look bad with a fallback font but we don’t recommend it if your site is a content site. Users don’t like waiting before they can read. It can cause illusion of slow site too. You get FOIT.

Fallback

Middle-ground between block and swap. The text is invisible for ~100ms and then show with a fallback font. If your custom font loads within ~3 second, then it swaps to that. But if it’s not loaded within 3 second, the fallback font will remain.

This is best for full content sites. If a user lands on your site, they get the text almost immediately so they can start reading. Since most people scan first, and then start reading, it usually takes them few second. So by the time they have started reading (~3 secs), the custom font would have loaded, but if it’s not loaded by then it won’t load later as that would disturb the user with a surprise change in font.

Optional

Similar to Fallback, but if your custom font hasn’t loaded in ~100ms, it won’t be used at all. The fallback font will be used.