Javascript--Font Loaded Check

by bowheart

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

JavaScript

var fontIsLoaded = function(fontName, content, callback) {
	callback || (callback = content) && (content = '');
	
	var testSpan = $('<span>' + (content || 'mmmmwwww') + '</span>');
	testSpan.css({
		fontFamily: 'arial',
		fontSize: '100px',
		position: 'absolute',
		top: '-999%',
		left: '-999%',
		visibility: 'hidden'
	});
	$('body').append(testSpan);
	
	var testSize = testSpan.width();
	testSpan.css('fontFamily', fontName + ', arial');
	
	var counter = 0;
	var interval = window.setInterval(function() {
		var resultSize = testSpan.width();
		var isLoaded = testSize !== resultSize;
		
		if (++counter >= 20 || isLoaded) {
			testSpan.remove();
			window.clearInterval(interval);
			callback(isLoaded);
		}
	}, 50);
};

fontIsLoaded('asdf', 'aa<i class="fa-times"></i>', function(isLoaded) {
	console.log(isLoaded);
});