javascript"

Here's a little HTML document I wrote which uses jQuery to generate a font-guessing script for use on your site:

<html>
<head>
<title>Font Guesser</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
/*
If you encounter two fonts which have the same results
try changing the fontTestString value
...
NOTE: Ensure that there are no CSS directives which
affect generic SPAN tags on your final site which are
not also applied to this font guesser script generator
*/
var fontTestString = 'AABCCDEEFGGHIIJmmmmwwww';
function fontFamiliesTest( valString ) {
$('#results').html( ' ' );
$('#yourJavascript').html( ' ' );
if ( ! valString ) {
alert( 'Please enter a font-family declaration' );
return false;
} else {
var fontFamilies = new Array();
fontFamilies = valString.split(',');
for ( var i = 0; i < fontFamilies.length; i++ ) {
$('#results').append( '<h2>' + fontFamilies[i] + '</h2><span class="baseLine" style="font-family:' + fontFamilies[i] + ';">' + fontTestString + '</span>');
}
$('#yourJavascript').append('<h2>Your jQuery font test script:</h2><form><textarea id="jQ" style="width:100%;height:500px;"></textarea></form>');
$('#jQ').append('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>' );
$('#jQ').append("rn" + '<script type="text/javascript">' );
$('#jQ').append("rn" + ' var usedFont = "";' );
$('#jQ').append("rn" + ' $(document).ready( function() {');
$('#jQ').append("rn" + ' $('body').append('<div id="testFontWrapper" style="position:absolute;bottom:0;height:1px;width:1px;">');');
$('#jQ').append("rn" + ' $('body').append('<span id="testFont" style="display:inline;font-size:100px;">' + fontTestString + '</span></div>');');
$('.baseLine').each(function() {
$('#jQ').append("rn" + ' if ( $('#testFont').width() == ' + $(this).width() + ' ) usedFont = "' + $(this).css('font-family') + '";');
});
$('#jQ').append("rn" + ' alert('Used font appears to be:' + usedFont );');
$('#jQ').append("rn" + ' });');
$('#jQ').append("rn" + '</script>' );
}
}
$(document).ready( function() {
$('#testForm').click(function() {
fontFamiliesTest( $('#fontFamily').val() );
});
});
</script>
<style type="text/css">
.baseLine {
font-size:100px !important;
}
</style>
</head>
<body>
<noscript>
<h1>Javascript Required</h1>
</noscript>
<p>Please enter the font-family declaration you would like to test fonts against:</p>
<form>
<input type="text" name="fontFamily" id="fontFamily" value="'Comic Sans',Arial,monospace" />
<input type="button" id="testForm" value="Go »" />
</form>
<div id="results"> </div>
<div id="yourJavascript"> </div>
</body>
</html>

The script uses the width characteristic of the fontTestString for each font at 100px height to determine which font is in use on the site.