font-display: swap and the other values, explained

When designing websites, the font-display CSS property is crucial for controlling the flash of invisible or unstyled text (FOIT) and flash of unstyled text

What is font-display and why is it important?

The font-display CSS property determines how a font face is displayed based on whether and when it is downloaded and ready to use. It helps manage the flash of invisible text (FOIT) and the flash of unstyled text (FOUT), which can affect the user experience. By controlling how fonts are rendered, you can ensure that text is always visible and styled appropriately, even if the custom font fails to load.

Understanding the different font-display values

There are five possible values for the font-display property, each with its own behavior:

auto: The default value, which allows the browser to use its default font-display strategy. This often results in a FOIT, where text is invisible until the custom font loads.
block: The browser hides the text for a short period (usually 3 seconds) before swapping to the custom font. This can lead to a longer period of invisible text but ensures that the custom font is used if it loads within the block period.
swap: The browser shows the text immediately using a fallback font and then swaps to the custom font as soon as it loads. This minimizes the time users see no text but can cause a FOUT.
fallback: The browser shows the text immediately using a fallback font, swaps to the custom font after a short period (usually 100ms), and then reverts to the fallback font if the custom font hasn’t loaded within 3 seconds. This is a compromise between swap and optional.
optional: The browser shows the text immediately using a fallback font and only uses the custom font if it loads very quickly (usually within 100ms). This is the most aggressive in terms of performance but can lead to the custom font being skipped if it doesn’t load in time.

When to use font-display: swap

The swap value is generally recommended for most web projects because it prioritizes text visibility. It ensures that users see the text immediately, even if the custom font hasn’t loaded yet. This is particularly important for content-heavy websites where readability is paramount.

Use cases for swap:
- Content-rich websites like blogs, news sites, and informational pages.
- Web applications where text is critical for user interaction.
- Sites that prioritize accessibility and fast loading times.
Recommended fonts for swap:
- Inter: A versatile sans-serif font with excellent legibility, ideal for both body text and headings.
- Merriweather: A serif font that offers high contrast and is great for long-form reading.
- IBM Plex Sans: A clean, modern sans-serif font that works well in various contexts.

When to use font-display: fallback

The fallback value is a good choice when you want to use a custom font but also want to ensure that the text is readable even if the custom font takes a bit longer to load. This value balances the use of the custom font with the need for fast rendering.

Use cases for fallback: Sites that use custom fonts for branding but also need to ensure fast loading times. Web pages where the custom font is not critical for readability but adds to the overall design. Projects that use a combination of system fonts and custom fonts.


Recommended fonts for fallback:

Fraunces: A stylish serif font that adds elegance to headings and titles.
Libre Franklin: A clean, modern serif font that works well for both body text and headings.


When to use font-display: optional
The optional value is the most aggressive in terms of performance. It only uses the custom font if it loads very quickly, which can be beneficial for users with slow internet connections. However, it also means that the custom font may not be used if it doesn't load in time.

Use cases for optional:

Sites that prioritize performance and fast loading times above all else.
Web pages where the custom font is a nice-to-have but not critical for the user experience.
Projects that use a custom font for decorative purposes rather than readability.


Recommended fonts for optional:

Playfair Display: A stylish serif font that works well for headings and titles.
Source Sans 3: A versatile sans-serif font that is easy to read and works well in various contexts.



When to use font-display: block or auto
The block and auto values are less commonly used because they can lead to a longer period of invisible text. However, there are some specific scenarios where they might be appropriate.

Use cases for block:

Sites that use a custom font for branding and can tolerate a short delay in text rendering.
Projects where the custom font is critical for the design and user experience.


Use cases for auto:

Sites that rely on the browser's default font-display strategy.
Projects where the developer wants to defer the decision on font rendering to the browser.



Frequently asked questions
What is the difference between FOIT and FOUT?
FOIT (Flash of Invisible Text) occurs when text is invisible until the custom font loads, while FOUT (Flash of Unstyled Text) occurs when the text is displayed immediately using a fallback font and then swaps to the custom font as soon as it loads. The font-display property can help manage these effects.
How do I choose the right font-display value?
The choice of font-display value depends on the importance of the custom font and the desired user experience. For most websites, swap is recommended because it prioritizes text visibility. However, if performance is a critical concern, fallback or optional might be more appropriate.
Can I use multiple font-display values for different fonts?
Yes, you can use different font-display values for different fonts depending on their role in your design. For example, you might use swap for body text and fallback for headings.
Are there any downsides to using font-display: swap?
The main downside of using swap is that it can cause a FOUT, which some designers find visually unappealing. However, the benefit of ensuring text visibility often outweighs this downside.