FontLoader Test

by smnh

HTML

<div id="loading">loading fonts</div>
<div id="fontsContainer"></div>

CSS

#loading {
    display: inline-block;
    background-color: #3A87AD;
    padding: 1px 4px 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 16px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#fontsContainer {
    visibility: hidden;
    font-size: 26px;
}
#fontsContainer > div {
    margin-bottom: 10px;
    float: left;
    clear: left;
}

JavaScript

(function(root, definition) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define([], definition);
	} else if (typeof exports === 'object') {
		// Node. Does not work with strict CommonJS, but only CommonJS-like 
		// environments that support module.exports, like Node.
		module.exports = definition();
	} else {
		// Browser globals (root is window)
		root.FontLoader = definition();
	}
}(window, function() {
	
	var isIE = /MSIE/i.test(navigator.userAgent),
		ieVer = null;
	
	// Get Internet Explorer version
	if (isIE) {
		var re, result;
		re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
		result = re.exec(navigator.userAgent);
		if (result !== null) {
			ieVer = parseFloat(result[1]);
		}
	}
	
	/**
	 * FontLoader detects when web fonts specified in the "fontFamiliesArray" array were loaded and rendered. Then it
	 * notifies the specified delegate object via "fontLoaded" and "fontsLoaded" methods when specific or all fonts were
	 * loaded respectively. The use of this functions implies that the insertion of specified web fonts into the
	 * document is done elsewhere.
	 * 
	 * If timeout (default 3000ms) is reached before all fonts were loaded and rendered, then "fontsLoaded" delegate
	 * method is invoked with an error object as its single parameter. The error object has two fields: the "message"
	 * field holding the error description and the "notLoadedFontFamilies" field holding an array with all the
	 * font-families that weren't loaded. Otherwise the parameter is null.
	 *
	 * @param {Array}     fontFamiliesArray       Array of font-family strings.
	 * @param {Object}    delegate                Delegate object whose delegate methods will be invoked in its own context.
	 * @param {Function}  [delegate.fontsLoaded]  Delegate method invoked after all fonts are loaded or timeout is reached.
	 * @param {Function}  [delegate.fontLoaded]   Delegate method invoked for each loaded font with its font-family string as its...