Google fonts + Pagespeed makes it blink

Question

My first solution was to just add Google Fonts like this:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Abel|Arimo:400,700' rel='stylesheet' type='text/css'>

Then I got hit by Google Page speed.

Google Pagespeed says I should load the fonts async. So I did and it works. Now the fonts are not loaded until the whole page is loaded.

<script type="text/javascript">
WebFontConfig = {
  google: {
    families: [ 'Open+Sans:300', 'Abel', 'Arimo:400,700' ]
  },
  active: function() {

  },
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

The downside is that I get a font "blink" because of the delay of the font load. Does it really need to be like that or is there a third solution?

Answer 1

There doesn't really seem to be a good way to prevent the blink on the first load, since the font doesn't get there until the page is already up.

The best way to deal with it appears to be to use some kind of flag, either through a cookie or in sessionStorage, to let the browser know to use a cached copy if possible.

There's a good article on it here. Good luck!