Categories
Quick Notes

Caching Google’s WebFont Loader

As with Google’s other hosted libraries, providing a more specific version number of webfont.js will effect browser caching.

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';

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development.

Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.