Load Google Font Asynchronously

Allure Web Solutions Code Snippet

The below snippet shows how to load Google Fonts asynchronously. The main benefit of loading fonts asynchronously is that it speeds up the site extensively.

(function ($, window, undefined) {
    // Load Google Fonts Asynchronously with two sample fonts (Roboto Condensed and Lato)
    window.WebFontConfig = {
        google: {families: ['Roboto+Condensed:400,700:latin', 'Lato:400,700:latin']}
    };
    (function () {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
})(jQuery, window);

 

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply