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.