Search code examples
htmlcssfontswebfontsgoogle-webfonts

Revert to unstyled text when web fonts are slow to load?

I'm using Google web fonts, like this:

@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: normal;
  src: local('Vollkorn Regular'), local('Vollkorn-Regular'), url('http://themes.googleusercontent.com/static/fonts/vollkorn/v2/BCFBp4rt5gxxFrX6F12DKnYhjbSpvc47ee6xR_80Hnw.woff') format('woff');
}
body {
    font-family: "Vollkorn", Georgia, Times, serif;
}

Working in Chrome, there is no "flash of unstyled text" (as described in this Typekit blog post). Instead, the text does not load at all until the web font is finished downloading.

Over a fast connection, it's great, because the fonts load asynchronously and very quickly. However, over a slowish connection, the page looks like it's empty for several seconds, until the web font has loaded - which is poor usability.

Is there a clever way to show the text in Georgia initially, then add the Vollkorn font-face once the resource has loaded?

I guess what I'm saying is that I'd actually quite like the "flash of unstyled text", rather than a blank page, and would like to enforce this behaviour.

Solution

  • You should look into the Web Font Loader that Google co-developed with a few other web font services.

    http://code.google.com/apis/webfonts/docs/webfont_loader.html