CodeVerity

Embed Fonts using FlashBuilder 4.5 Actionscript Only Project for a Mobile App

Saturday, June 18 2011 - flash

Last week I lost a good 6+ hours trying to get embedded fonts to work on an iOS / Android Flashbuilder project. I know Adobe is aware of this, but I’m going to say it again. Embedded fonts is just plain screwy. There is no reason it should take an entire day to get a font to rotate and actually appear on the screen. I can rotate fonts all day long in every major browser with just a few lines of CSS, but making the same happen in Flashbuilder is like standing on one leg while walking a tight rope.

If you want to rotate a font it MUST be embedded.

To embed a font in an Actionscript only project you use the embed tag:

[Embed(source='/fonts/times.ttf', fontFamily="FooFont")]

public var FooFont:Class;

There are a number of other properties you can include, but this is enough to make rotation work.

There are a lot of sites dedicated to this issue, unfortunately none of them had the answer I needed. There is one Adobe bug report that contains the key to solving the problem, but it wasn’t clear at all to me what the problem was so it was hard to identify the solution.

You use the embedded font like this:

var textField:Textfield  =new TextField();

textField.text = “blah”;

textField.embedFonts = true

textField.antiAliasType=AntiAliasType.ADVANCED;

var tf:TextFormat = new TextFormat();

tf.font = “FooFont”; <—name of the fontFamily

textField.setTextFormat(tf);

textField.rotation = currentRotation; <—some rotation value

addChild(textField);

 

Run your program and what do you see? Nothing. The text will not display. If you remove the rotation it still will not display. If you change embedFonts = false then your text will display but not using the embedded font. If you iterate over the embedded fonts you will see that the font we embedded is actually there and the size of the swf reflects that.

The fix is the embed your font using the following:

[Embed(source='/fonts/times.ttf', fontFamily="FooFont", embedAsCFF="false")]

If you don’t include embedAsCFF = “false” it will not work. Now there are use cases for having embedAsCFF = “true” so I suggest you look up what it means… go here for those who can’t google.