async-stylesheets-and-fonts.js

/*
Based on https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Further reading:

  Preventing a Flash of Invisible Text
  https://www.filamentgroup.com/lab/font-events.html

  Detecting a stylesheet has loaded
  https://viget.com/inspire/js-201-run-a-function-when-a-stylesheet-finishes-loading

*/

(function(){
    var cb = function() {
      var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = this.url;
      var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
              webkitRequestAnimationFrame || msRequestAnimationFrame;
    var stylesheets = [
      '//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.3-RC2-33619',
      '//fonts.googleapis.com/css?family=Alfa+Slab+One',
      '//fonts.googleapis.com/css?family=Montserrat:400,700'
    ];
    for(var i=0;i<stylesheets.length;i++) {
      var f = cb.bind({'url': stylesheets[i]});
      if (raf) raf(f);
      else f(); // or you might do jQuery(document).ready(f)
    }
})();