Web Font flickering on load [closed]

Question

We have a website - everything is working but web fonts flicker for a split second before the page loads.

Desired behaviour is that it doesn't flicker.

This doesn't seem to happen on other sites & I can't see any difference.

We are using fonts.com fonts.

All I can find on Google is an issue with Firefox - but this happens in all browsers for me.

Is there something obvious I have missed? How can I fix this?

Answer 1

It happened to me before and I went to through these two steps:

1- Use preloading: In your headers you can add this

 <link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin ></link>

Make sure the href path and extensions are correct. With preloading, your fonts will start downloading before other assets and it will improve the chance to not get flicker, but it might not be enough depending on if your webfont is too weight.

2- Use font-display:fallback This property blocks displaying the text for a short time while loading and if passed this time doesn't load it swaps to the default font.

For example:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

If doing all this, your font takes even longer to load and you don't want the flicker to occur, instead of fallback you might want to set font-display: block . You can check about this property here It is not recommended because if download fails, you won't be able to display your site, but if flicker is a priority, then it can help.

Source: https://web.dev/optimize-webfont-loading/

Answer 2

There's a couple ways to battle this.

1 - Since you're pulling the font from a website and you don't have the font hosted locally on your own server, there's a delay between your page loading and the font loading from fast.fonts.net.

If you download the font (.ttf) and run it through fontsquirrel's webfont generator, it should elevate some of the loading issue.

2 - Since it's only flickering for a few seconds on page load, you can hide your webpage's content a short duration while the font loads (200 milliseconds). This will ensure that when your page content loads that your user doesn't see the flickering.

Paul Irish has an article about this: http://www.paulirish.com/2009/fighting-the-font-face-fout/

Answer 3

You're probably seeing what is called FOUC (flash of unstyled content). It's a common issue. I suppose you can try the web font loader for more control of the font loading.