title: Google fonts + Pagespeed makes it blink
body: <p>My first solution was to just add Google Fonts like this:</p>
  
  <pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Abel|Arimo:400,700' rel='stylesheet' type='text/css'&gt;
  </code></pre>
  
  <p>Then I got hit by Google Page speed.</p>
  
  <p><a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow">Google Pagespeed</a> 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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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);
  })();
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>