Defeating Flash of Unstyled Text (FOUT)

Subscribe to my newsletter and never miss my upcoming articles

I noticed when I loaded my personal site without cache, my text would first display without the correct font. It eventually restyle using the original font after everything loaded.

font-flash.gif

I was originally using a NPM package called typeface-roboto to load my font. This was awesome because I wanted to host the fonts myself instead of pulling from a CDN. I realized the styles included in the package was the reason for my Flash of Unstyled Text (FOUT).

I looked through the code inside the package and checked out the CSS files. Here is an example of how they were adding the font.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap; /* Line Causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

I noticed the @font-face styles were using font-display: swap;. When swap is set, the browser will give a very short time to load the font before it uses a fallback. Once the font is fully loaded, it will convert back to the expected font. This option is great from a performance standpoint but might affect user experience. If you set font-display: block, this will increase the amount of time the browser will have to fetch your fonts before it starts displaying anything on the page. block sacrifices performance for user experience.

My Solution

I pulled all the font files into my project instead of using the NPM package. Then inside my CSS, I loaded the fonts using font-display: block;

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: block; /* No longer causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

Since my websites design is heavily focused on typography. I was willing to sacrifice some performance to give my fonts a little more time to load before anything is displayed.

no-flash.gif


  • Follow me on Twitter for random posts about tech, programming, and working from home.
  • Personal Website in case you wanted to check it out yourself
Dinys Monvoisin's photo

I was having the same issue without knowing how to fix it, thanks for the tip. Here is the page, if you want to have a look.

Corey O'Donnell's photo

I am glad I could help.

I just wanted to let you know this does have performance impact on your page if it's important to you.

Chris Bongers's photo

Just be aware it might affect your loading times. Block makes it load longer, that's what swap is actually for.

Corey O'Donnell's photo

Yes, I made sure to make that point that it will affect performance/load time.

Syed Fazle Rahman's photo

There’s no harm in doing that. Many websites follow this step to avoid typography flickering.

Thanks for sharing how it’s done.