Tag: Fonts

  • Caching Google’s WebFont Loader

    The Google WebFont Loader provides the following sample code:

    WebFontConfig = {
      google: { families: [ 'Tangerine', 'Cantarell' ] }
    };
    (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);
    })();

    The line in bold indicates version one of webfont.js is being loaded. As with Google’s other hosted libraries providing a more, or less, specific version number will effect both browser caching and whether the webfont.js is upgraded automatically.

    Version in code Version provided Caching period
    1 Latest in Version 1 tree (currently 1.0.17) 1 hour
    1.0 Latest in Version 1.0 tree (currently 1.0.17) 1 hour
    1.0.17 Version 1.0.17 1 year

    By using the exact version number in your code, the load time of your site will improve on return visits as webfont.js will already be cached in your visitors browser. It will be cached on your visitors first visit if they’ve visited another site using the exact version in the last twelve months.

    You can see the latest version available by visiting the Google Libraries Developer Guide. You can specify the exact version number in your code by replacing the bold line in the code sample above with:

    '://ajax.googleapis.com/ajax/libs/webfont/1.0.17/webfont.js';