Working with Text in CSS: Shaping Loading Behavior with font-display

Early browser implementations of @font-face differed pretty significantly in how they handled text while waiting for the web font to download. Firefox, for example, drew text using the fallback font face, then swapped the font face once downloaded—resulting in the dreaded “flash of unstyled text”, or FOUT.

Safari’s implementation, on the other hand, drew invisible text, then swapped it for the visible font face once it finished loading. Users would see large blocks of empty space until the font face was available to the browser. Developers dubbed this the “flash of invisible text”, or FOIT.

The font-display descriptor came about largely as a way to let developers choose which behavior they prefer. It has five possible values. Excluding auto , each of these values changes the duration of the block and swap periods of the font display timeline.

  • auto : initial value. The “Browser’s Choice” option. It uses whatever policy the browser prefers.
  • block : draws invisible text until the font loads, then swaps the font face. (Approximately a three-second block period, and an infinite swap period.)
  • swap : draws text using the fallback font until the font face loads, then immediately swaps the font face. (Roughly a 100ms block period, and an infinite swap period.)
  • fallback : draws text using the fallback font, while waiting for the font face to load. If the font face takes too much time to load, it continues to use the fallback. Otherwise, it swaps the font face once loading completes. (Approximately a 100ms block period, and about a three-second swap period.)
  • optional : uses the font only if it can be downloaded immediately. Otherwise, it will use the fallback text. The browser can decide whether or not to download the font and swap it, or continue to use the fallback text. Optional won’t cause layout shifts. The browser may never swap the font face.

When a browser begins downloading a font face, it enters the block period. During the block period, the browser draws text using an invisible fallback font. If the font face finishes downloading during the block period, the browser will use it.

Next comes the swap period. During the swap period, if the font face hasn’t loaded, the browser draws the text using the fallback font. It then swaps the font face when loading completes.

If the font hasn’t loaded by the end of the swap period, the browser enters the failure period. The browser uses the fallback font.

1. Understanding auto

When font-display is auto , you’re relying on the browser’s default font-face handling. For most recent browsers, that behavior resembles block . There’s a short period of about three seconds during which the user won’t see any text. The image below shows what this looks like in Firefox using a simulated 2G connection.

In most browsers, font-display: auto means the text will be invisible until the font face loads. Text that doesn’t use the web font is immediately drawn.

If the font face hasn’t loaded by the end of this timeout period, the browser draws text using the fallback font. When the font fully downloads, as shown below, the browser swaps the text.

On very slow connections, font faces can take several seconds to download. Until then, your site visitors won’t be able to read any text that uses a font face.

Instead, use fallback or optional , particularly for larger blocks of text. They’re both particularly well suited to serving users with slow internet connections. For smaller blocks of text, such as headlines, swap also works well. All three values keep your text visible while the font face loads. Something is happening. As a result, the page loading time seems faster to users than seeing no text at all, as happens with block or auto .

Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.

Leave a Reply

Your email address will not be published. Required fields are marked *