Currently implementing Google web fonts in this manner:
@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;
}
When using Chrome, there is no occurrence of "flash of unstyled text" as mentioned in this Typekit blog post. Instead, the text remains invisible until the web font finishes downloading.
On a fast internet connection, the fonts load swiftly and asynchronously. Yet, on a slower connection, the page appears empty for several seconds while waiting for the web font to load, leading to poor usability.
Is there a smart method to display the text in Georgia initially and then switch to the Vollkorn font-face upon loading?
In essence, I prefer having the "flash of unstyled text" over a blank page and would like to enforce this behavior.