hasseg.org

Getting a List of Installed Fonts with Flash and Javascript

Filed under ActionScript 3, Flex, Miscallaneous, Programming

When implementing the feature in the icalBuddy examples page where the font used for the output examples could be changed interactively I needed to get a list of all the fonts installed on the current user's computer. This blog post from 2006 explains how to do it, but it refers to the deprecated ActionScript 2 API so I had to figure out how to do it with AS3.

Demo

Here's a small demo where you can see the feature at work: Font List Example. The sources shown below are used in this demo.

Implementation

We need a small Flash app and some Javascript. Below is the source code for the Flash app.

Note that you don't need the Flash authoring app from Adobe in order to compile this; you can simply use the mxmlc compiler in the Flex SDK (which is open source). 

// FontList.as
package {
	
	import flash.display.Sprite;
	import flash.text.Font;
	import flash.text.FontType;
	import flash.text.FontStyle;
	import flash.external.ExternalInterface;
	
	public class FontList extends Sprite
	{
		public function FontList()
		{
			ExternalInterface.call('populateFontList', getDeviceFonts());
		}
		
		public function getDeviceFonts():Array
		{
			var embeddedAndDeviceFonts:Array = Font.enumerateFonts(true);
			
			var deviceFontNames:Array = [];
			for each (var font:Font in embeddedAndDeviceFonts)
			{
				if (font.fontType == FontType.EMBEDDED
					|| font.fontStyle != FontStyle.REGULAR
					)
					continue;
				deviceFontNames.push(font.fontName);
			}
			
			deviceFontNames.sort();
			return deviceFontNames;
		}
	}
}

Notice how the Flash app calls a Javascript function populateFontList() via the ExternalInterface. Now we just need to implement that function in the page where we embed the Flash object: 

function populateFontList(fontArr)
{
	for (var key in fontArr)
	{
		var fontName = fontArr[key];
		
		// trim
		fontName = fontName.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
		
		if (fontName.match(/[_\-\s]Italic$/)
			|| fontName.match(/[_\-\s](Demi)?[Bb]old$/)
			|| fontName.match(/[_\-\s]Medium$/)
			|| fontName.match(/[_\-\s](Ultra)?[Ll]ight$/)
			|| fontName.match(/[_\-\s]Condensed$/)
			)
			// font is "non-regular" (i.e. bold, italic etc.)
			// (do something here with fontName)
		else
			// font is "regular"
			// (do something here with fontName)
	}
}

12 Comments

marcus July 21, 2010 at 12:34 PM

very nice. :)

any chance to leave out the flash part?

best marcus

 Ali Rantakari July 21, 2010 at 12:35 PM

Hi Marcus,

I don’t think Javascript has access to this information.

 marcus July 21, 2010 at 12:37 PM

well that was quick. :)

thanks.

marcus

 Invisible December 20, 2010 at 5:28 PM

Is there any way to make it work only when I call populateFontList() in JavaScript? I just want sth like this: 

var fontsList = populateFontList();

 Ali Rantakari December 20, 2010 at 5:44 PM

Yeah, you’ll just have to register a callback on the Flash side using ExternalInterface::addCallback() and then you’d be able to do that.

 Invisible December 20, 2010 at 5:48 PM

The point is that now, when I put fonts list in a variable, page appears but keeps loading and loading…

And sorry for bad English btw. ;)

 Invisible December 23, 2010 at 7:08 PM

I finally make it work! THANKS! :D

 Gregg Lind August 15, 2011 at 1:27 AM

Can you put a license (say, BSD?) on the code snippets? I would like to package this up (the flash, the js, and some backup plan for places without Flash (silverlight seems inadequate.. other suggestions welcome!) along with some other font detection tools (crediting you, of course!). I am thinking of calling it “fontdetect” or something!

 Ali Rantakari August 15, 2011 at 10:12 AM

Hi Gregg – Everything on my site is under the MIT license unless otherwise specified – please see the sidebar on the right side of the page.

 Mike December 15, 2011 at 2:26 PM

Hey,

Im pretty new to both actionscript and javascript. I am trying to achieve what Invisible wanted back in 2010. That is to be able to call populateFontsList() in javascript and have it return the list that way.

I noticed you mentioned addCallBack(), I have been looking around for documentation on this but cant figure out how to implement it into this scenario.

Is there any chance you could let me know how to implement this?

Thanks

 Chris July 6, 2012 at 7:48 PM

Great but I’m trying to render the font on my webpage by just doing an inline css “font-family” call. The display name and the actual font name seems to be different. Any idea how I might fix that? I’m currently trying to parse bold/semibold/italic/oblique/condensed/compressed by hand but there’s no way I can account for every variation in the font name.

 rrsj April 17, 2013 at 11:32 PM

Hi, I compile the FontList.as with mxmlc, then I put the FontList.swf and index.html in the same folder to check all installed fonts, but no luck. Then I copied all html code from Font List Example page, but can see only “Listing not done yet…”. But I have javascript and flash enabled, because I can see carousel in http://coolcarousels.frebsite.nl/c/69/ and flash in http://disneyworld.disney.go.com/new-fantasyland/. So could you tell me what am I missing?

Thank you.

Categories