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.