rel=me 

I was playing around with jquery and I wanted to see if it was possible to generate a cheat sheet of all the fonts on your system. Its also a good run through of how to load a SWF with a callback.

View a demo (Though, its possible it might not work)

The steps I used to generate this are:

• Load SWF
• Javascript calls to Actionscript fonts() method via ExternalInterface
• Get the list of system fonts in Flash via Font.enumerateFonts(true)
• Curse Flash for giving you a list of font names, where half of them are garbage.
• For each font name, in javascript, create a test which adds a DOM element temporarily with a fallback font family set. For example, font-family: 'Apple Garamond Pro', 'Times New Roman';, where Times New Roman is your fallback.
• Then check the actual width (via offsetWidth). If it does not match the offsetWidth of the fallback font, then we know it rendered ok. (The original idea is from http://www.lalit.org/lab/javascript-css-font-detect)

The only caveat is, if the actual font width and the fallback font width do match, then you would have a false negative. So its not bulletproof.

The actionscript to enumerate the fonts and call back out is pretty simple:

public function fonts():Array {
  return Font.enumerateFonts(true).sortOn("fontName", Array.CASEINSENSITIVE);
}

Expose the method in the constructor using ExternalInterface:

ExternalInterface.addCallback("fonts", fonts);

FontList.as

I used swfobject to load the SWF. Also be sure to enable allowScriptAccess.

The javascript to test the fonts is at: font-detect.js

You can use it by including:

<!-- element for SWF to load into -->
<div id="font-detect-swf"></div>
 
<script src="javascripts/jquery-1.2.6.pack.js"></script>
<script src="javascripts/swfobject.js"></script>
<script src="javascripts/font-detect.js"></script>  
<script>
  $(document).ready(function() {
 
    var fontDetect = new FontDetect("font-detect-swf", "flash/FontList.swf", function(fd) {        
      var fonts = fd.fonts();
 
      // Do something with fonts, which look like: [ { fontName:'Arial', fontStyle:'regular' fontType:'device' }, .... ]
      // for(var i = 0; i < fonts.length; i++) {
      //   var name = fonts[i].fontName;
      // }
    };
 
  });
</script>

In the end, I don’t think this is useful in practice, but I thought I would share anyway. Its on github too.

Updated: Now uses call straight to actionscript, doesn’t marshall JSON first so its much faster, and other refactoring.

Tags: Flash, fonts, Javascript

This entry was posted on Thursday, June 26th, 2008 at 10:08 pm and is filed under Flash, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.