Things I Code

30Sep/110

Embedding fonts in Flash

Something that has caused me trouble time and time again is embedding fonts within AIR Actionscript apps.  While your app may display custom fonts fine in your local simulator, once you get it onto a device you may find that no text is displayed, or is not displayed with expected font.

As this has caught me out again, I'm documenting the process as much for my own benefit as any one else who comes across problem.

My platform is Flash Builder 4.5 on Mac OS X Lion.

Initially I tried embedding the font using the [Embed(...)] ActionScript syntax, however I could never get it to work reliably, so instead I've taken to packaging the Font as a SWC in Flash Pro and then linking my Flash Builder project against the SWC.

There's a great article on ADC covering how to embed fonts into Flash Pro CS4, and for the most part the process is exactly the same in CS5.5.

Embedding Fonts by Peter deHaan
http://www.adobe.com/devnet/flash/quickstart/embedding_fonts.html

 

However, once i'd added the font to the Library and set the Symbol and Linkage properties there was a bit of trial and error to get the Font into my Flash Builder project.  Here's the next set of steps I needed:

1. Export the SWC from Flash Pro

Set the Flash Project to Publish as a SWC and set the Output file to a location in your Flash Builder project.

 

2. Reference the SWC in Flash Builder 

In your Flash Builder project, add the SWC to the ActionScript Build Path > Library path properties page.

 

3. Register the Font in your Application

In your app's start up, you need to register your imported font with Flash.

Font.registerFont(classname);

Where classname is the Class Linkage property set in Flash Professional.  If you included a package name in your classname (i.e. package.classname) then don't forget add an import for it as well.

 

4. Set yourself up a default TextFormat

As i found i was creating many TextField objects with identical defaulTextFormat properties, I create a static TextFormat object that defined a common style for me.

var defaultTextFormat : TextFormat = new TextFormat("fontname", fontsize, color);

The Gotcha when creating a TextFormat is to ensure that the fontname value is the actual font name stored in the underlying Font.  This isn't necessarily the name that is displayed to you in Flash Pro, or even shown by Font Book (in Mac OSX) by default.

The value needed is the Full name as shown in the Font properties.

As an example, to use Arial Black Regular, you'd have to use the font name "Arial Black" - which is what you'd expect.

 



var arialBlackTextFormat : TextFormat = new TextFormat("Arial Black", 16, 0x000000);

However, with other fonts, this might not be the same.  For example to use the Coolvetica Regular, you have to use the font name "CoolveticaRg-Regular"

 



var coolveticaTextFormat : TextFormat = new TextFormat("CoolveticaRg-Regular", 16, 0x000000);

Using the wrong font name has been the cause of many hours of angst for me.

 

5. Create your TextField

Finally, you're ready to create and use your TextField.  Ensure you set it up with the correct embedFonts and defaultTextFormat properties.

var label : TextField = new TextField();
label.embedFonts = true;
label.defaultTextFormat = yourTextFormatObject;

If the Flash gods are smiling on you, you should find your fonts embedding correctly across platforms and devices.