Embedding Fonts in Flash Pro

MarkBlog

Something occurred to me just yesterday that, whilst we’ve had this solved for sometime, it took a LOT of figuring out, googling and otherwise smacking the keyboard in frustration.

For anyone who has tried to embed a font into an AS3 project – or if you’ve tried and found this after searching Google – you can know it’s a pain and for whatever reason, doesn’t always work!
What jogged my memory was me starting a new project.  There I was, re-using code and getting the entire project structure all sorted.  I added a simple TextField, ran it, everything looked fine.  When I tried it on a different machine, it all looked horrible – the font hadn’t embedded.

Fortunately, somewhere in the pile of scraps of paper, I wrote down the procedure that worked for me and *BLAM* problem solved!  So, for anyone out there who’s suffering this same issue, here’s the procedure I use to achieve this:

  1. Include the font within your FLA.
    In the library, right-click and choose “New Font”
    Play around with the settings, make sure you tick the symbols you want to include (I usually just go for uppercase, lowercase, numbers and punctuation, rather than just tick “All”
  2. Export the font for ActionScript
    Still in the Font properties dialogue – if you closed it, right click it and choose properties, from the library.  Next, hit the ActionScript tab.  Tick “Export for ActionScript”.  Check the “Class” so that you know how to call your font (I usually just call mine “EmbedFont” so that I can copy and paste code from one project to the next… and I usually only embed a single font, so it’s not really a big deal!)
  3. Include the font in your code
    Now, this is the part that is often hit-and-miss!  We’ll do the whole code chunk in a second, but that’s the basic procedure.

And now the code:
(This code will show you how to embed a font and display it in a TextField)

  • The necessary Imports
    We need to bring in several AS3 classes in order to fully embed and use the font.

import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.Font;
import flash.text.TextFieldAutoSize;

  • Create our Variables
    You can create and instantiate these at the same time, if you prefer… I usually only call the constructor when I really need it!

private var embedFont:EmbedFont;
private var textFormat:TextFormat;
private var displayText:TextField;

  • Instantiate the Font and TextFormat…
    First, we have the Font and TextFormat.  You have to use a TextFormat if you want to ensure that your font will be embedded and used!

this.embedFont = new EmbedFont();
this.textFormat = new TextFormat();
this.textFormat.font = this.embedFont.fontName;
this.textFormat.size = 18;

  • And instantiate the TextField
    The key thing here are the calls to defaultTextFormat and setTextFormat.  I use both.  You shouldn’t have to, but it works… and if it ain’t broke, why fix it?

// Create the text field
this.displayText = new TextField();
this.displayText.embedFonts = true;
this.displayText.defaultTextFormat = this.textFormat;
this.mdisplayText.textColor = 0x000000;
this.displayText.setTextFormat( this.textFormat );
this.displayText.autoSize = TextFieldAutoSize.LEFT;
this.displayText.mouseEnabled = false;

  • Don’t forget…
    To add the text field to the stage!

this.addChild( this.displayText );

[NB: You can use the textFormat to set the font colour OR you can call textColor on the TextField itself.  Whichever is the last you call will be the colour that is set.  So if you call textColor and then you call setTextFormat, then the TextFormat’s colour will be the one that is used!]

If you use the above, that should work just fine and the font you want to embed will be carried over to any and all machines, even if it isn’t installed.  Which is great if you’re deploying an SWF to a web page, or if you’re running an AIR application on multiple platforms!

___________________________________