Preventing FOUT and FOUC Caused by Web Fonts Loading

How to prevent flash of unstyled text and layout shifts caused by web fonts loading too late.

2695 views

By. Jacob

Edited: 2021-06-15 12:19

A problem caused by loading web-fonts is the so-called FOUT, Flash Of Unstyled Text. It happens when a browser is loading a page while still waiting for the web font to load; once the web-font finishes loading, the text rendered with a temporary font on the page may be swapped with text rendered using the loaded font.

A negative effect of swapping fonts is that it causes "jumping" of page content, this is also known as Cumulative Layout Shifts (CLS); ideally a good CLS value should be close to 0, but accomplishing such a low CLS value can be difficult and may require specialized knowledge.

To prevent fonts from causing layout shifts, you can try to block the rendering of text until the font is loaded, for this, font-display:block; can be used. Generally however, a value of swap is preferable. When swapping, you can probably limit CLS by styling the fallback fonts more carefully.

The easiest way to prevent these font-related issues is to stop using web fonts; that is not necessarily recommended, but it is worth mentioning that you can often get very satisfactory results by using the so-called web-safe fonts when styling them carefully. Sometimes you might even be able to make a safe font look near identical to the font you would otherwise have used.

Using web-safe fonts

Often times these problems will mainly affect people with slower internet connections, but FOUC and FOUT should both be avoided regardless, as it tends to cause "jumping" and accidental clicks for users. When an element suddenly moves from under the pointer, the user might accidentally click something they did not intend to click on.

Here are some fonts that are considered web-safe:

sans-serif

```
Arial
```
```
Arial Black
```
```
Verdana
```
```
Tahoma
```
```
Helvetica
```
```
Trebuchet MS
```
```
Calibri
```

serif

```
Times New Roman
```
```
Georgia
```
```
Palatino
```
```
Lucida Bright
```

Fonts that are web-safe should have a high availability on both Windows and Mac. Note that mobile devices have even fewer fonts available.

Avoid font swapping

A compromise is to apply font-display:optional; where needed, as this will instruct a browser to use a fallback font if the font is not loaded within 0.100s — this gracefully degrades the experience for people with a slow internet connection while enhancing it for people with faster connections, and it avoids font-swapping.

You can specify multiple fonts in the font-family, starting with your preferred font, and then listing web-safe fallbacks. Here is an example using Open Sans as the primary font:

body {
  font-family:"Open Sans", Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;
  font-display:optional;
}

The fonts are prioritized first to last, so if Open Sans is not loaded fast enough, a web-safe fallback font will be used instead.

Keep in mind these settings are inherited by child elements, so you only need to specify fonts on elements that you want to have a different styling; if taking headings as an example:

h1,h2,h3,h4,h5,h6 {
  font-family:"Roboto", Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;
}

Note that font-display is inherited, so we do not need to specify it again.

Including more fonts in the system

Although it is very easy to do, users rarely install fonts by themselves. But, as web designers, we should install all the fonts that we are using in order to make it easier to test how they look. An easy way to test a specific font is to just list that one font in the font-family:

font-family: "Times New Roman";

If you got "Times New Roman" installed on your system, it should render, if not, a fallback will be used. If the font is not included, you will have to download- and install them manually. Unfortunately, many fonts are copyrighted and can be hard to come by.

Ideally OS makers should just include more free and open source fonts in their systems, since they take very little extra space. Depending on the licensing of individual fonts, they may be able to include them for free — so there is no excuse! This would give web designers a larger variety of fonts to choose from, without having to fight these problems, and the user experience would be improved at the same time.

But, a thing to keep in mind is that just because you think it looks good to include your own font does not mean it adds value to your users. Custom fonts often just serve as "eye-candy" to the web designer, while adding nothing or little value to users.

Users do not necessarily get a better experience on your website just because you use a custom font, and if your font choice diverge too much from what people are used to, then people might just get annoyed and leave your website. For example, if you think using a handwritten-ish font gives your blog a more personal touch, then you may be right, but a lot of users will struggle to read such a font, and they might leave your site if they are sufficiently annoyed by it.

Using web-safe fonts

Avoid font swapping

Including more fonts in the system

Tell us what you think: