Web Font flickering on load

Question

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

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.

eg http://lpff.niico.co.uk/About/Who-We-Are/Our-People

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

Answer 1

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.

Answer 2

A good library that solved my problem of loading the fonts synchronously was https://github.com/typekit/webfontloader

It is very simple to use:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Answer 3

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 a good article about this from the good ole days: http://www.paulirish.com/2009/fighting-the-font-face-fout/