If you are reading this, please get modern browser.
skip to main content | skip to main navigation | skip to secondary content

Detect visitor’s fonts with Flash

~ 18th August 2006. · 14:45 CET · permanent link · printer friendly ~

get font list preview

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.

15 Comments

  1. I see it as an interesting way of letting users set page fonts but can’t see much use for it beyond that. Where else do you think something like this could be used?

    (btw: still cool. :) )

  2. @Jonathan: I really can’t answer that question :)

    However, every now and then, an occasional visitor drops me a line asking about how it’s done.

  3. This is an interesting technique. I agree with Jonathan, in that, it could be used as a way of letting users set page fonts. I also see this as a metric gathered by web statistics programs. I don’t know what you would do with that data though.

  4. I agree with Chase. It would make for some interesting statistics. You could specify a few fonts and find out what percentage of your visitors has each font installed. You could build your font-family lists with a much better idea of how many people will actually see the site in each font that you list.

  5. Well, let say you want to use Georgia as your main font on your site. But, not all surfers do have Georgia installed. Normally you would specify Times New Roman as a subsitute in your css style. But Georiga and Times New Roman have way different heights and lenghts when the are set to the same size. But now, you could create one style sheet for Georgia and one for TNR. Thats great!

  6. Could it be used in the background, to get statistics about your visitors? Maybe put it in a popular website, and gather the most common fonts?

  7. Genious! I wish I could have 1/100 of your knowledge :)

  8. That’s excellent, exactly what I was looking for.

    I have a web page transcribing English first names into Thai script (phonetic transcription only) and want to show them their name in Thai using different fonts, so I will try to detect the fonts available on their computer and only display their name with the detected fonts.

    If I can make it work, the result will be available here:
    http://www.cnx-translation.com/your-name-in-thai.php

  9. I can’t seem to get the script to work. I can edit it to make it work in IE7, but it won’t ever work in FF2<as >

  10. hit enter too soon… in IE it works when I change the js from
    <…var fontList = function(user_fonts) {…>

    to <…var fontList = fontList(); function fontList(user_fonts) {…>

    but it still won’t work in FF. any suggestions?

  11. Hi Jason, please upload what you have somewhere online.

  12. I’m struggling with your comment form :-). Line breaks seem to break it. Anyway…

    The code is online at http://www.youintern.com/node/489. I’m planning to use it to load specific stylesheets depending on the user’s local fonts and browser/OS combo (primarily because not everyone has Calibri and Cambria, and those who use FF2 on OSX encounter a big rendering bug with OpenType fonts).

    For now, though, the site just outputs what stylesheets it would load. “Calibri” and “Cambria” if you’ve got them; “Verdana” and “Times” if you don’t. That is it would if I could get it to work.

    Thanks for your help!

  13. I’m struggling with your comment form :-). Line breaks seem to break it. Anyway… The code is online at http://www.youintern.com/node/489. I’m planning to use it to load specific stylesheets depending on the user’s local fonts and browser/OS combo (primarily because not everyone has Calibri and Cambria, and those who use FF2 on OSX encounter a big rendering bug with OpenType fonts). For now, though, the site just outputs what stylesheets it would load. “Calibri” and “Cambria” if you’ve got them; “Verdana” and “Times” if you don’t. That is it would if I could get it to work. Thanks for your help!

  14. Jason, your code is full of errors. Could you please take care of that first?

  15. Done (except a small bug in a share feature I’m using). Still no progress toward font detection…

RSS feed for comments on this post

Leave your comment in the form below. Just make sure you don’t use pharmaceutical phrases, or slang that describes various procreation scenarios or related body parts.

Some HTML is allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>. Please use &#60; (<) and &#62; (>) for code samples.









* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.

Typetester – compare screen type Supported by Veer.

What is this?

A web log of Marko Dugonjić, web professional from Croatia. Topics covered:

Translate this site

German, Spanish, Italian, French or Japanese (via).

See you there!

Feel like buying a book?

Try with maratz.com aStore

Personal Network

.HR Community

Public profiles

mi3, QBN, Flickr, Last.fm, LinkedIn, Coolinarika, Croportal

Worth visiting

top of the page | skip to main content | skip to main navigation | skip to secondary content