Embedding fonts on the fly in AS3

Lots of posts out there talking about runtime font embedding (first one i saw and thought was intelligent was Scott G Morgan’s breakdown and explaination: http://www.scottgmorgan.com/blog/index.php/tag/fonts/).

My issues came up when using Flash instead of Flex to embed fonts at runtime. Why use Flash at all you ask? Hmm, not sure really, but in general I like to timeline some stuff so it’s more convienient to just have Flash runnig instead of Flex and Flash at the same time (that, and LOTRO of course =).

Also, i wanted the leanest most compact swf file i could get, and i wasn’t sure that Flex would exclude all it’s frameworks from the swf when i compiled so i stuck with Flash for now.

So, anyway, all good fonts load in and work etc, but an interesting thing happened on the way to the colloseum, stylesheets wouldn’t work with fonts that were working fine in textformats. Now, Scott does mention some specifcs about naming etc in Flex, but i figure that the majority of the world still is Flash based, so a general guideline to how to do it properly and have it work every time is important as a reference (because Lord knows, in a few months i’ll forget how this worked).

First of all, you need a swf with a font (or fonts) embedded as symbols in the library. You can have lots of font symbols but in general you should separate the fonts out and only load the ones you need at runtime, that way you can create a lean experience for the clients as they access your site.

This all relates to my opensource templating engine called “Daelgren”, so in general using a product like Daelgren solves these issues for you but some folks like to do things for themselves.

Forming the font symbol:

*****One very important note! The name and class must match, but the Font (True Font Name) cannot match the Name/Class name, otherwise you will not get the font to appear in stylesheeted text fields (for some reason this does work fine in TextFormatted fields)!****** In my examples I’ve used two underscores to uniquely name the font, but use any convention you like as long as the name doesn’t match the Font Name.

Properties Dialog

Linkage Dialog

Save the file and produce the swf from this file.

In your main application you would use code like this to set up your movie to use external fonts:

In Flash, on the first frame, create some timeline code to load the font in at runtime:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener( Event.INIT, onLoaderInit );
loader.load( new URLRequest( “eurostile.swf” ) );

function onLoaderInit( event:Event ):void {
 var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;

// THIS VALUE IS FROM THE LINKAGE DIALOG CLASS DEFINITION
 var fontClass:Class = Class( domain.getDefinition( “__eurostile” ) );
 Font.registerFont( fontClass );
 loader.contentLoaderInfo.removeEventListener( Event.INIT, onLoaderInit );
 loader.unload();

// THIS LISTS ALL THE CURRENT FONTS REGISTERED FOR USE IN THE APPLICATION, IN THIS CASE WE ONLY HAVE ONE LOADED THUS THE USE OF [0] TO GET THE FIRST FONT 
var fonts:Array = Font.enumerateFonts();

 var myTextFormat:TextFormat = new TextFormat();
 myTextFormat.font = fonts[0].fontName;
 myTextFormat.size = 24;
 trace(“fontname:”+fonts[0].fontName);
 var myTextField:TextField = new TextField();
 myTextField.autoSize = TextFieldAutoSize.LEFT;
 myTextField.defaultTextFormat = myTextFormat;
 myTextField.embedFonts = true;
 myTextField.text = “The quick brown fox jumped over the lazy dog.”;
 myTextField.x = 0;
 myTextField.y = 0;
 addChild(myTextField);
 

// FOR AN EXTERNAL STYLE SHEET YOU’LL NEED TO DEFINE THE fontFamily NAME AS THE TRUE FONT NAME (in this example:’Eurostile LT Std’);
 var myStyleSheet:StyleSheet = new StyleSheet();
 myStyleSheet.parseCSS(“.fontclass {color: #FF0000;fontFamily: “+fonts[0].fontName+”;fontSize: 24pt;letterSpacing: 0;marginLeft: 0;}”);
 var myStyleField:TextField = new TextField();
 myStyleField.autoSize = TextFieldAutoSize.LEFT;
 myStyleField.styleSheet = myStyleSheet;
 myStyleField.embedFonts = true;
 myStyleField.border = true;
 myStyleField.text = “<p class=’fontclass’>The quick brown fox jumped over the lazy dog.</p>”;
 myStyleField.x = 0;
 myStyleField.y = 30;
 addChild(myStyleField);
}

This sample shows how to use both TextFormat and StyleSheets to set the correct values. In general, when referencing the font in your text field formats, always use the ‘true’ font name (in this case ‘Eurostile LT Std’), but when loading a font class from an external file always use the linkage name (set in both the properties and linkage dialogs in flash).

If you need more information please contact me and i’ll help you out.

Tip of the hat to Michael Heu, who’s sample code i snagged portions of for this example.