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

Question

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.

Antenatal

Answer 1

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

Actinia

Answer 2

This could be done via JavaScript once the page is loaded:

<script>
window.onload = changeFont;

function changeFont() {
   document.getElementsByTagName('body')[0].fontFamily = '"Vollkorn", Georgia, Times, serif';
}
</script>

Then, update your CSS to remove the "Vollkorn" from the list setting it to Georgia. Depending on how long it takes to load the font, you might need to wrap the changing of font in a setTimeout call.

Atrophied

Yes, I thought about setTimeout, but what I really need is a 'web font has loaded' event. Any way to pick that up using JS? – Antenatal