Load Google Fonts Asynchronously without Render-Blocking CSS

Posted by Lasantha Bandara File Under : fonts, google, seo 0 Comment

The Web Font Loader is developed by Google and Typekit. It can load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. The snippet given below will help you to load Google fonts asynchronously using the Web Font Loader without render-blocking CSS problem. It will improve your site's performance and will give a higher score with PageSpeed Insights test.

Add this code just before the </head> tag of your website:

<script type='text/javascript'>
//<![CDATA[

  WebFontConfig = {
      google: {
          families: ['Lato:400,400i,700,700i,900,900i:latin', 'Roboto:400,400i,700,700i:latin,greek,latin-ext', 'Open Sans Condensed:300,700:latin,greek']
      }
  };

  (function(d) {
      var wf = d.createElement('script'),
          s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
  })(document);

//]]>
</script>

Note: Using above code I have added 3 Google web fonts with different font weights and additional character subsets. You can change these values as you like.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.