So you want to detect fonts in a HTML5 webapp? Presenting a fast-native solution for accurately detecting fonts installed on your system — this demo utilizes Javascript and the <canvas> tag and requires a browser that supports ctx.fillFont(), and ctx.getImageData() — including Chrome, Firefox, IE9, Opera and Safari.

This plugin would make sense a website such as TypeTester to use when the browser supports .  Since Flash supports more fonts than HTML on certain systems it doesn’t make sense for TypeTest to use a Flash plugin, unless the font rendering is in Flash as well.  The reason for this issue is HTML5 specs excludes older fonts that are not using UTF8 encoding.  Wingdings, Webdings, Symbols, and other older fonts (installed on your system) cannot be guaranteed to work properly across platforms in HTML.

One solution is to use UTF8 symbols. The following sets seem to be well supported across systems. Using the isFontSupported code (simple string matching) systems can be profiled for UTF8 symbol compatibility, and then cross-referenced to find symbols supported across systems and configurations. I’ll post an update when free time comes around, or maybe someone else will take over

http://www.fileformat.info/info/unicode/block/dingbats/utf8test.htm
http://www.fileformat.info/info/unicode/block/arrows/utf8test.htm

Demo: isFontSupported.js