Detect visitor’s fonts with Flash

Typetester knows which fonts are installed on your local system with a little help of Flash. Flash can detect your font list and pass it to a JavaScript function. Here’s how it’s done…

ActionScript & getFontList()

Typetester’s flash does just that – detects fonts, so the ActionScript snippet is very simple (no wonder, since it’s brought by pepa, the man behind the Multi color sIFR).

Down to business – create new Flash doc, click on the layer and expand Actions panel.

First, you fill the variable user_fonts with the following…

var user_fonts = TextField.getFontList();

… and sort it alphabetically:

user_fonts.sort();

Next, you call JavaScript function from Flash:

getURL('javascript:fontList("' + escape(user_fonts) + '")', '_self');

Save all as font_getter.swf and include it somewhere in your HTML document with the following (valid) markup:

<object id="font_getter" name="font_getter" type="application/x-shockwave-flash" data="font_getter.swf" width="1" height="1">
    <param name="movie" value="font_getter.swf" />
</object>

The above method of embedding Flash movies is my favorite whenever the appearance of Flash isn’t crucial (which is almost always the case – Flash shouldn’t carry the main functionality. Generally, I see Flash more as an added value).

This method will not bug visitor to upgrade to a newer version. If she wanted to, she’d already upgrade, right?

Some alternative approaches can be found in Microsoft, ActiveX and noscript article.

JavaScript & fontList()

Now that you have your font list in the JavaScript environment, just split the string and make it an array:

var fontList = function(user_fonts) {
    var obj = document.getElementById('font_getter'),
        fonts;
    if (typeof(user_fonts) != 'undefined') {
        /* getURL works well in Safari, Opera nad Firefox, but poorly in IE */
        fonts = unescape(user_fonts);
    } else if (typeof(obj.GetVariable) != 'undefined') {
        /* element.GetVariable doesn't work in Opera and Safari,
        but works well in IE where JavaScript directly speaks with Flash */
        fonts = obj.GetVariable('/:user_fonts');
    };
    if(typeof(fonts) == 'string') {
        /* convert string to array */
        fonts = fonts.split(',');
    };
    return fonts;
};

Use the fontList() array further in a way that’s best suitable for the task at hand.