Skip to content

Instantly share code, notes, and snippets.

@goblindegook

goblindegook/demo.html

Created August 3, 2010 17:30
Show Gist options
  • Save goblindegook/506781 to your computer and use it in GitHub Desktop.
Save goblindegook/506781 to your computer and use it in GitHub Desktop.
Download ZIP
Check if a font is installed (requires jQuery)
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment