Skip to content
Dev Tech
  • Home
  • Tech

Avoid invisible text during font loading

June 25, 2021 Article

Nov 5, 2018

Appears in: Fast load times
Katie Hempenius

Contents

  • 1 Why should you care? #
  • 2 Display text immediately #
  • 3 Option #1: Use font-display #
  • 4 Option #2: Wait to use custom fonts until they are loaded #
  • 5 Verify #

Why should you care? #

Fonts are often large files that take awhile to load. To deal with this, some browsers hide text until the font loads (the “flash of invisible text”). If you’re optimizing for performance, you’ll want to avoid the “flash of invisible text” and show content to users immediately using a system font (the “flash of unstyled text”).

Display text immediately #

This guide outlines two ways to achieve this: the first approach is very simple but does not have universal browser support; the second approach is more work but has full browser support. The best choice for you is the one that you’ll actually implement and maintain.

Option #1: Use font-display #

Before After
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; font-display: swap; }

font-display is an API for specifying font display strategy. swap tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out.

If a browser does not support font-display, the browser continues to follow it’s default behavior for loading fonts. Check which browsers support font-display here.

These are the default font-loading behaviors for common browsers:

Browser Default behavior if font is not ready…
Edge Uses a system font until font is ready. Swaps out font.
Chrome Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.
Firefox Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font.
Safari Hides text until font is ready.
READ Also :   Building split text animations

Option #2: Wait to use custom fonts until they are loaded #

With a bit more work, the same behavior can be implemented to work across all browsers.

There are three parts to this approach:

  • Don’t use a custom font on initial page load. This ensures that the browser displays text immediately using a system font.
  • Detect when your custom font is loaded. This can be accomplished with a couple lines of JavaScript code, thanks to the FontFaceObserver library.
  • Update page styling to use the custom font.

Here are the changes you can expect to make in order to implement this:

  • Refactor your CSS to not use a custom font on initial page load.
  • Add a script to your page. This script detects when the custom font is loaded and then will update the page styling.

Verify #

Run Lighthouse to verify the site is using font-display: swap to display text:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. Click the Generate report button.

Confirm that the Ensure text remains visible during webfont load audit is passing.

Last updated: Nov 5, 2018Improve article

Calendar

March 2022
M T W T F S S
 123456
78910111213
14151617181920
21222324252627
28293031  
« Feb    

Archives

  • March 2022
  • February 2022
  • January 2022
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • Improve article
  • Performance
  • Tech
  • Uncategorized
  • Wordpress

Copyright Dev Tech 2022 | By Theme in Progress | Proudly powered by WordPress

en_USEnglish
id_IDIndonesian en_USEnglish