goblindegook/demo.html

## demo.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>isFontAvailable() Demo</title>
	<meta name="description" content="">
	<meta name="author" content="Luís Rodrigues">
	<meta name="viewport" content="width=device-width">
	<style>
	    .available { color: #000; }
	    .unavailable { color: #f00; }
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="isFontAvailable.js"></script>
	<script>
        jQuery(document).ready( function () {

            // Checking for a font array:

            var font = [
                'Arial',
                'Cochin',
                'Consolas',
                'Courier',
                'Courier New',
                'Georgia',
                'Gill Sans',
                'Helvetica',
                'Helvetica Neue',
                'Lucida Console',
                'Optima',
                'Palatino',
                'Univers',
                'Verdana',
                'No Such Font'
            ];

            var fontAvailability = isFontAvailable( font )

            jQuery.each( font, function (i, v) {
                if (fontAvailability[i]) {
                    jQuery('#results').append( '<li class="available" style="font-family:' + v + '">' + v + ' is available</li>' );
                } else {
                    jQuery('#results').append( '<li class="unavailable">' + v + ' is not available</li>' );
                }
            } );

            // Checking for a single font:

            if (isFontAvailable( 'Wingdings' )) {
                jQuery('#results').append( '<li class="available" style="font-family:Wingdings">Wingdings is available</li>' );
            } else {
                jQuery('#results').append( '<li class="unavailable">Wingdings is not available</li>' );
            }

        } );
    </script>
</head>
<body>
    <ul id="results"></ul>
</body>
</html>

## isFontAvailable.js
function isFontAvailable (font) {
    var testString  = '~iomwIOMW';
    var containerId = 'is-font-available-container';

    var fontArray = font instanceof Array;

    if (!fontArray) {
        font = [ font ];
    }

    var fontAvailability = [];

    var containerSel = '#' + containerId;
    var spanSel      = containerSel + ' span';

    var familySansSerif = 'sans-serif';
    var familyMonospace = 'monospace, monospace';
    // Why monospace twice? It's a bug in the Mozilla and Webkit rendering engines:
    // http://www.undermyhat.org/blog/2009/09/css-font-family-monospace-renders-inconsistently-in-firefox-and-chrome/

    // DOM:
    $('body').append('<div id="' + containerId + '"></div>');
    $(containerSel).append('<span></span>');
    $(spanSel).append(document.createTextNode(testString));

    // CSS:
    $(containerSel).css('visibility', 'hidden');
    $(containerSel).css('position', 'absolute');
    $(containerSel).css('left', '-9999px');
    $(containerSel).css('top', '0');
    $(containerSel).css('font-weight', 'bold');
    $(containerSel).css('font-size', '200px !important');

    jQuery.each( font, function (i, v) {
        $(spanSel).css('font-family', v + ',' + familyMonospace );
        var monospaceFallbackWidth = $(spanSel).width();
        var monospaceFallbackHeight = $(spanSel).height();

        $(spanSel).css('font-family', v + ',' + familySansSerif );
        var sansSerifFallbackWidth = $(spanSel).width();
        var sansSerifFallbackHeight = $(spanSel).height();

        fontAvailability[i] = true
            && monospaceFallbackWidth == sansSerifFallbackWidth
            && monospaceFallbackHeight == sansSerifFallbackHeight;
    } );

    $(containerSel).remove();

    if (!fontArray && fontAvailability.length == 1) {
        fontAvailability = fontAvailability[0];
    }

    return fontAvailability;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>isFontAvailable() Demo</title>
	<meta name="description" content="">
	<meta name="author" content="Luís Rodrigues">
	<meta name="viewport" content="width=device-width">
	<style>
	.available { color: #000; }
	.unavailable { color: #f00; }
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="isFontAvailable.js"></script>
	<script>
	jQuery(document).ready( function () {

	// Checking for a font array:

	var font = [
	'Arial',
	'Cochin',
	'Consolas',
	'Courier',
	'Courier New',
	'Georgia',
	'Gill Sans',
	'Helvetica',
	'Helvetica Neue',
	'Lucida Console',
	'Optima',
	'Palatino',
	'Univers',
	'Verdana',
	'No Such Font'
	];

	var fontAvailability = isFontAvailable( font )

	jQuery.each( font, function (i, v) {
	if (fontAvailability[i]) {
	jQuery('#results').append( '<li class="available" style="font-family:' + v + '">' + v + ' is available</li>' );
	} else {
	jQuery('#results').append( '<li class="unavailable">' + v + ' is not available</li>' );
	}
	} );

	// Checking for a single font:

	if (isFontAvailable( 'Wingdings' )) {
	jQuery('#results').append( '<li class="available" style="font-family:Wingdings">Wingdings is available</li>' );
	} else {
	jQuery('#results').append( '<li class="unavailable">Wingdings is not available</li>' );
	}

	} );
	</script>
	</head>
	<body>
	<ul id="results"></ul>
	</body>
	</html>
	function isFontAvailable (font) {
	var testString = '~iomwIOMW';
	var containerId = 'is-font-available-container';

	var fontArray = font instanceof Array;

	if (!fontArray) {
	font = [ font ];
	}

	var fontAvailability = [];

	var containerSel = '#' + containerId;
	var spanSel = containerSel + ' span';

	var familySansSerif = 'sans-serif';
	var familyMonospace = 'monospace, monospace';
	// Why monospace twice? It's a bug in the Mozilla and Webkit rendering engines:
	// http://www.undermyhat.org/blog/2009/09/css-font-family-monospace-renders-inconsistently-in-firefox-and-chrome/

	// DOM:
	$('body').append('<div id="' + containerId + '"></div>');
	$(containerSel).append('<span></span>');
	$(spanSel).append(document.createTextNode(testString));

	// CSS:
	$(containerSel).css('visibility', 'hidden');
	$(containerSel).css('position', 'absolute');
	$(containerSel).css('left', '-9999px');
	$(containerSel).css('top', '0');
	$(containerSel).css('font-weight', 'bold');
	$(containerSel).css('font-size', '200px !important');

	jQuery.each( font, function (i, v) {
	$(spanSel).css('font-family', v + ',' + familyMonospace );
	var monospaceFallbackWidth = $(spanSel).width();
	var monospaceFallbackHeight = $(spanSel).height();

	$(spanSel).css('font-family', v + ',' + familySansSerif );
	var sansSerifFallbackWidth = $(spanSel).width();
	var sansSerifFallbackHeight = $(spanSel).height();

	fontAvailability[i] = true
	&& monospaceFallbackWidth == sansSerifFallbackWidth
	&& monospaceFallbackHeight == sansSerifFallbackHeight;
	} );

	$(containerSel).remove();

	if (!fontArray && fontAvailability.length == 1) {
	fontAvailability = fontAvailability[0];
	}

	return fontAvailability;
	}