Embedding Fonts into Actionscript Only Project (AS3)

Embedding fonts has been a bane to me for some time, and I finally spent the time to find both the easiest and most comprehensive way to embed needed fonts into a SWF using AS3 only. As always, I try to keep the demos here as lightweight as possible, and I have tried to keep any code snippets I give free from external resources. In this case, there is a small exception, but it is only the exception of using one of the fonts installed on your own computer.

Basically, we need to understand a couple things about the nature of the embedded font in Actionscript. First, it must be assigned to a String in order to store all the character references. Next, you will quickly find that creating and implementing a TextFormat object to attach the font and styles to the different places in which it will be used is ideal. Finally, keep in mind that attaching several fonts to a single application can significantly increase the file size, so try to consolidate and style for variety as much as possible instead of selecting a boat load of different font faces.

Now that we have the boring overview out of the way, let’s look at embedding the font itself. The basic principle is to simply embed on a line preceding your String to hold the font. My recommendation is to do this in your base class as a public variable that will be accessible from wherever you may need it:

[Embed(source="C:\\WINDOWS\\Fonts\\CALIBRI.TTF", fontFamily="Calibri")]
public var _calibri_str :String;

Note that assigning a fontFamily attribute will let you then reference this font by name elsewhere in your script. Now, we can simply create a TextFormat object to use our embedded font and assign it to a TextField:

// TextFormat object
var format :TextFormat = new TextFormat();
format.font = "Calibri"; // Here is where the magic happens
format.color = 0xffffff;
format.size = 12;

// TextField object
var txt :TextField = new TextField();
txt.embedFonts = true;
txt.antiAliasType = flash.text.AntiAliasType.ADVANCED;
txt.defaultTextFormat = format;
txt.text = "Testing my embedded Calibri font";

addChild(txt);

A couple more things to note, and we’ll be done. First of all, be aware that you must assign the defaultTextFormat object to your TextField object before you assign any text to it for the first time. Once you have done so, the basic formatting will be picked up by the field any time the text changes.

I also want to point out my choice to assign the ADVANCED style of anti-aliasing. The default value here is NORMAL, which is actually more fitting for most larger fonts and sizes above about 14 (depending on the font itself, of course). However, by assigning the advanced anti-aliasing, we can really clean up smaller print and make it more legible.

That’s all there is to it! So, now you can keep building AS only applications and embed your fonts ’til your heart’s content. If you want to see this exact code in action, view this post and notice the “Update” message in the SWF on display.

Enjoy!

One thought on “Embedding Fonts into Actionscript Only Project (AS3)

  1. is this for Actionscript 3? I’ve been having crazy issues with trying to get a Myriad font embedded in AS2. Can’t seem to get it to stick even after making dynamic text fields and or embedding the font normal through adding the font to the library and giving it a linkage name.

    I’m wondering now, if I am missing something like uploading the actual font file to my root folder for the site.

    Any ideas?

    Thanks for posting this!

    CR

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>