Cache webfont in localStorage

font.js

/**
 * Adapted from https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
 * This version tries to load the font from localStorage. If it's not there it simply adds a link to the stylesheet
 * and ajaxes the contents in on load. This makes an extra request. But adding the stylesheet link renders quicker than
 * waiting for a response to the ajax request and then injecting the contents into a style tag, hopefully minimising the
 * FOUT you get when you view http://www.theguardian.com/ and http://www.smashingmagazine.com.
 */
(function () {
	"use strict";
	// Once cached the css file is stored on the client forever. To invalidate the cache change this URL.
	var css_href = '//url-of-font/fonts-base64.css';
		
	function conlog(msg){ window.console && console.log ? console.log(msg) : null; }
	
	// Old browser - just attach the stylesheet
	if (!window.localStorage || !window.addEventListener) {
		conlog('Font - old browser');
		attachStylesheet();
		return;
	}
	
	// Add event handler
	function on(el, ev, callback) {
		if (el.addEventListener) {
			el.addEventListener(ev, callback, false);
		} else if (el.attachEvent) {
			el.attachEvent("on" + ev, callback);
		}
	}

	if (fileIsCached(css_href)) {
		// Font is in localStorage - inject into style tag
		conlog('Font - in localstorage');
		injectRawStyle(localStorage.font_css_cache);
	} else {
		// Font isn't in localStorage - attach stylesheet and ajax it in after load
		conlog('Font - not in localStorage');
		attachStylesheet();
		on(window, "load", storeFont);
	}

	// Is file in localStorage?
	function fileIsCached(href) {
		return localStorage.font_css_cache && (localStorage.font_css_cache_file === href);
	}

	// Ajax in the fonts CSS and save it in localStorage
	function storeFont() {
		if (!window.XMLHttpRequest) {
			// Old browser - use browser cache
			return;
		}
		conlog('Font - ajaxing in font');
		var xhr = new XMLHttpRequest();
		xhr.open("GET", css_href, true);
		// cater for IE8 which does not support addEventListener or attachEvent on XMLHttpRequest
		xhr.onreadystatechange = function () {
			if (xhr.readyState === 4) {
				conlog('FONT storing font');
				localStorage.font_css_cache = xhr.responseText;
				localStorage.font_css_cache_file = css_href;
			}
		};
		xhr.send();
	}

	function attachStylesheet() {
		conlog('Font - attaching stylesheet');
		var stylesheet = document.createElement('link');
		stylesheet.href = css_href;
		stylesheet.rel = 'stylesheet';
		stylesheet.type = 'text/css';
		document.getElementsByTagName('head')[0].appendChild(stylesheet);
	}

	// Inject CSS into a style tag
	function injectRawStyle(text) {
		conlog('Font - injecting font css in style tag');
		var style = document.createElement('style');
		style.setAttribute("type", "text/css");
		style.innerHTML = text;
		document.getElementsByTagName('head')[0].appendChild(style);
	}

}());