Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 706
Richard Avatar asked Dec 05 '11 18:12

Richard


People also ask

How do you fix Fout?

The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to: Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible. Adjust the font styles ( font-size , line-height , letter-spacing , etc.)


1 Answers

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

like image 126
Brad Dunzer Avatar answered Oct 23 '22 00:10

Brad Dunzer