{"id":191,"date":"2006-08-18T14:45:06","date_gmt":"2006-08-18T12:45:06","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/08\/18\/detect-visitors-fonts-with-flash\/"},"modified":"2007-08-08T08:19:54","modified_gmt":"2007-08-08T06:19:54","slug":"detect-visitors-fonts-with-flash","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/08\/18\/detect-visitors-fonts-with-flash\/","title":{"rendered":"Detect visitor’s fonts with Flash"},"content":{"rendered":"

\"get<\/p>\n

Typetester<\/a> 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\u2019s how it\u2019s done…<\/p>\n

ActionScript & getFontList()<\/code><\/h3>\n

Typetester\u2019s flash does just that – detects fonts, so the ActionScript snippet is very simple (no wonder, since it\u2019s brought by pepa<\/a>, the man behind the Multi color sIFR<\/a>).<\/p>\n

Down to business – create new Flash doc, click on the layer and expand Actions panel.<\/p>\n

First, you fill the variable user_fonts<\/code> with the following…<\/p>\n

var user_fonts = TextField.getFontList();<\/pre>\n
… and sort it alphabetically:<\/p>\n
user_fonts.sort();<\/pre>\n
Next, you call JavaScript function from Flash:<\/p>\n
getURL('javascript:fontList(\"' + escape(user_fonts) + '\")', '_self');<\/pre>\n
Save all as font_getter.swf<\/code> and include it somewhere in your HTML document with the following (valid) markup:<\/p>\n
<object id=\"font_getter\" name=\"font_getter\" type=\"application\/x-shockwave-flash\" data=\"font_getter.swf\" width=\"1\" height=\"1\">\r\n    <param name=\"movie\" value=\"font_getter.swf\" \/>\r\n<\/object><\/pre>\n
The above method of embedding Flash movies is my favorite whenever the appearance of Flash isn\u2019t crucial (which is almost always the case – Flash shouldn\u2019t carry the main functionality. Generally, I see Flash more as an added value).<\/p>\n
This method will not bug visitor to upgrade to a newer version. If she wanted to, she\u2019d already upgrade, right?<\/p>\n
Some alternative approaches can be found in Microsoft, ActiveX and noscript<\/a> article.<\/p>\n
JavaScript & fontList()<\/code><\/h3>\n
Now that you have your font list in the JavaScript environment, just split the string and make it an array:<\/p>\n
\r\nvar fontList = function(user_fonts) {\r\n    var obj = document.getElementById('font_getter'),\r\n        fonts;\r\n    if (typeof(user_fonts) != 'undefined') {\r\n        \/* getURL works well in Safari, Opera nad Firefox, but poorly in IE *\/\r\n        fonts = unescape(user_fonts);\r\n    } else if (typeof(obj.GetVariable) != 'undefined') {\r\n        \/* element.GetVariable doesn't work in Opera and Safari,\r\n        but works well in IE where JavaScript directly speaks with Flash *\/\r\n        fonts = obj.GetVariable('\/:user_fonts');\r\n    };\r\n    if(typeof(fonts) == 'string') {\r\n        \/* convert string to array *\/\r\n        fonts = fonts.split(',');\r\n    };\r\n    return fonts;\r\n};\r\n<\/pre>\n
Use the fontList()<\/code> array further in a way that\u2019s best suitable for the task at hand.<\/p>\n","protected":false},"excerpt":{"rendered":"
What fonts are on a visitor’s system?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,7,8],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/191"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/191\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}