7

Loading a (Google) webfont asynchronously

 3 years ago
source link: https://barryvanveen.nl/articles/21-loading-a-google-webfont-asynchronously
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Loading a (Google) webfont asynchronously

Feb 05, 2016

Just like stylesheets and Javascript files, requesting a webfont can be postponed or done asynchronously. Doing so will make your pages render more quickly, especially on browsers with a slower internet connection.

Asynchronous loading with Web Font Loader

Loading your webfont asynchronously can be done with the Typekit webfontloader which was developed by Typekit and Google. Doing so is pretty easy. Just remove the @import statement from your CSS and include some Javascript in your template.

<script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Raleway:400,700:latin' ] }
    };
    (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

Speed boost

The beauty of asynchronously loading these fonts is that your browser can render the page before your Raleway webfont is fully loaded. First it displays the page with a fallback font, in this case something like Helvetica or Arial. This dramatically reduces the time that it takes to render the first elements on your website. This increases the (perceived) speed of your website.

Flash...

So, while your webfont is not loaded the browser will display the fallback font. When the webfont is loaded all texts that use this font will be updated and redrawn. This leads to a visible flash. Texts are shown a little different, possibly with somewhat different spacing and line heights.

There are different ways of dealing with this. Some people apply IMO ridiculous strategies to avoid this behavior. The reason for doing this is not to make the website good-looking, it is meant to make it as fast as possible.

If you don't want this little flash just don't load your fonts asynchronously, stick with the @import statement in your CSS. And remember, browsers will cache the font at the first request, so there will be no more flashes on subsequent pages.

PageSpeed Insights

Old scores: Mobile: 71/100. Desktop: 89/100.
New scores: Mobile: 98/100. Desktop: 99/100.

Apparently Google makes a very big deal out of this :) The last thing I could improve on is making analytics.js cacheable for a longer period. Google is serving it with a 2-hour expiration header. It's true that this is quite short, but since so many websites use Google Analytics I think it will be in the browser cache already...

Continue reading

Related articles

Comments (1)

Got a question? Liked the article or got a suggestion? Leave a comment to let us know.

Daan van den Bergh Oct 20, 2019
Hi!

Thanks for your explanation of how to use Google Webfonts asynchronously.

I've built two WordPress plugins, one of which allows you to host Google Webfonts locally. I've used this article as inspiration to implement the asynchronous loading using Typekit's Web Font Loader.

Btw, you could host analytics.js locally as well. This way you could increase the expiration header. I've done it in my WordPress plugin, called CAOS.

Thanks again,

- Daan

Name

Email address (not visible to others)

Message


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK