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

About Peter Wilson

Peter Wilson is a Web developer based in Melbourne, Australia, and started making Websites in 1994.

Peter co-founded web production studio Soupgiant in 2009 and forms opinions on all things web at Big Red Tin.

Leave a Reply

Your email is never shared.