Font Embedding in AS3 : Lessons Learned

I have spent some time actually working with font embedding in AS3 and gone a little beyond the other simple examples you will see. While there may be several posts about embedding fonts in AS3, I have yet to see any real detailed information along with things to be aware of. If you have yet to see any of the basic examples you can read this post by Marcos Weskamp. Yes, it really is that simple to embed fonts now -- at least, on the surface it is. Let us dive down a little deeper.

The [Embed] meta-tag is used to embed a font. There are 3 different ways to specify the font:

[Embed(source='/assets/fonts/FONT.TTF', fontName="Font", mimeType="application/x-font-truetype")] [Embed(source='C:\WINDOWS\Fonts\FONT.ttf', fontName="Font", mimeType="application/x-font-truetype")] [Embed(systemFont='Font', fontName="Font", mimeType="application/x-font-truetype")]

If you use a relative path, you can start with a slash to begin your path from the root of the project. If you embed with an absolute path, keep in mind that you need to double the slashes as they are escape characters. If you embed a system font, then use the actual name of the font as it appears installed on your system. For any of those three options, the fontName should match what you are setting either in your html or TextFormat, like one of the following two:

mytextFormat.font = "Font"; // or mytextField.htmlText = '<font face="Font">My text</font>';

When you use meta tags, there are two options: They can either go inside the package and outside the class definition (like you would do to specify swf options), or they can go inside the class. Placing them outside the class will work, however you cannot do more than one font embedding in this manner. If you try to do two subesquent Embeds outside the class, you will get an error "Error: Unable to transcode /assets/fonts/FONT.TTF". If you put them inside the class definition, you will need to place a variable for them to be assigned to for each one, like so:

[Embed(source='/assets/fonts/FONT.TTF', fontName="Font", mimeType="application/x-font-truetype")] private static var EMBEDDED_FONT:String;

For font embedding, the variable is not actually needed for usage, though for embedding image resources you will actually use it. If you are using an AssetManager class to consolidate all your external needs (highly recommended in my book), then you need to remember that if you have *only* fonts in there you will need to reference something in the class to get it compiled in to your swf. Simply referencing one of the variables you assigned the font identifier to will work, like so: var n:String = AssetManager.FONT_VERDANA;

package { public class AssetManager { [Embed(systemFont='Verdana', fontName="Verdana", mimeType="application/x-font-truetype")] public static const FONT_VERDANA:String; [Embed(source='/assets/fonts/HAMBURGER.TTF', fontName="Hamburger", mimeType="application/x-font-truetype")] public static const FONT_HAMBURGER:String; [Embed(source="C:\WINDOWS\Fonts\seguibk.ttf", fontName="Segoe", mimeType="application/x-font-truetype")] public static const FONT_SEGOE:String; } }

Hopefully, this will help create a little extra awareness for what is involved with embedding fonts in AS3, as well as document what causes the transcoding error. In summary, I really like the way we can manage embedded assets in AS3 now. I still see one large problem that is left unaddressed (to my knowledge) in AS3 however : Shared Libraries. Especially with how Flash is maturing as a presentation medium for rich applications, it is difficult to still see this thorn persisting. As an example: If you were going to make a small Flash application to design T-Shirts for Cafe Press, you could probably fit most of the base code to do the designing in 20-50k in AS3. But wait - you want the user to be able to choose from an array of 30 fonts. If you embed each of those fonts, you would kick the size of the application up to the order of several mb. Ideally, I'd like to see loadSharedResource made as a public method we can call to load images, fonts or swf files with common classes, which would make those items available in any running code after that.

Feel free to leave any thoughts and comments or to share your experiences.

Others Have Said

is this possible only with Flex Builder?

Nope, I personally use FlashDevelop for all my development and it works just great. The way the asset embedding works is a language feature, not a feature of the development environment.

what about embedding a postcript font on the mac?

From my understanding we should be seeing OpenType fonts available as valid embed sources. I'm not sure about PostScript fonts though.

Wierd, this UI for entering comments on your blog looks all jumbled on firefox, might want to check that out. On topic, how does this apply to the infamous mac/pc font alignment issue? I mean in terms of building your application on a pc, then building that exact app on a mac using the same font files. What is the outcome?

Odd, thanks for the heads up on the comment form Steve - it should be fixed now in Firefox. Regarding the alignment issues, I'd have to admit I'm not sure - I don't have a Mac handy to test.

This might help you with the topic "Shared Libraries" http://adobeusergroup.be/index.php?option=com_content&task=view&id=27&Itemid=10 Thanks for your post.

I've tested this approach in Mac and failed, has anyone else tried?

After looking for a solution for quite a while now, i fell on an adobe post saying that only TrueType fonts are currently available. In order to import any other type they suggest to use the importation of a FlashType. Here's the tutorial on how to: http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000789.html i tried it and it worked for me. Hope it helps! A.

Thanks for the tip, but I'm curious -- how do you actually reference the embedded font once it's in there? I'm trying to do so with the value I've assigned to fontName, but to no avail.

Brian : All you need to do is use what you specify in the fontName property for either your textFormat or in the css / htmlText. It can actually be anything you want, and there may be issues if there is a collision with an installed font on the system. What were you doing and what was the result? If you can't get it working, let me know and I'll throw together a sample and put it up. =)

Hey Mike, Thanks for the reply. I had tried it with what I had assigned to fontName, as well as the fontName variable name itself, but to no avail. I Googled a bit more and found a gent who was using the variable name 'fontFamily' instead. I tried it in conjunction with your embed method and it worked. FYI, I'm using the current FB3 pre-release beta. I'm going to be purchasing the discounted FB2 in a few weeks...do you think the IDE is to blame here?

Brian - I had tried the fontFamily before too and it's a bit unclear when to use which. If I reacall correct, fontFamily worked for me in beta of SDK1, but then I had to switch to fontName to get it working. I've successfully used fontName in Flex SDK 1 and 2 - haven't tried it with 3 yet. Are you on a Mac? As I've only tried it on Windows and I'm curious if the difference could lie there. I don't think the IDE would be a likely culprit as both FlashDevelop and FlexBuilder are going to be using the same Flex SDK for compiling, which is where it matters. My use of FlashDevelop is strictly a personal matter of just wanting a lightweight, efficient and effective code-editor and it fits that bill. I don't use most of the tools that FB has that FD3 doesn't, therefore I don't personally need the extra overhead. =)

I don't use a lot of the bells and whistles in FB, either, but I'm a dedicated Mac user. That being said, my issue with embedding is here at work, where I'm running on XPSP2. Also, I'm not compiling with SDK3 -- I have it set to use 2 with Hotfix. I'll have to look into FlashDevelop here at work : - ) Thanks for all of you're help, you're being quite awesome (and great site you've got here).

Hi people hi Mike, How i can add upload movie in my site web...thx for reply

this doesn't work in flash cs3 :(

Randy, I CS3 allows you to embed assets a bit more directly. Just google it. If I remember correctly, it's easier in the Flash Authoring Tool than in Flex Builder or any straight AS3 tool.

i did it this way... http://blog.paoloiulita.it/2008/03/11/as3-embedding-font-with-code-only/

Thanks! This worked great! I was banging head against the desk trying to figure this out. I was referencing the Actionscript 3.0 Cookbook, but it didn't have anything about making the constants. So there'd be errors. This was just part of the headache...the other part was that this step was required to use the alpha property on the sprite that contains the text...since the system fonts wouldn't work with alpha. So way crazy...and I guess it's easier with Flash or something...but I like writing pure AS3 in Flex Builder. Thanks again.

Does this work with CSS Styles? I want to be able to do something where a sentence passed to the textfield could have individual elements wrapped in span's that have different classes. Where one is a style from a stylesheet that specifies one font and another would be a class that specifies another font. Both being embedded with this method. Is that's possible?

This post is a bunch of shit. None of what you are saying works. Nothing!

I've found this to work: First embed the font in a .swf from Flash CS3, then reference that .swf in your Class. In this example the font .swf is sitting top level. [Embed(source="/fonts.swf", fontFamily="HelveticaNeueLT Com 75 Bd")] private var _helvetica_neue_str:String; Then var format:TextFormat = new TextFormat(); format.font="HelveticaNeueLT Com 75 Bd"; And apply that format to your text field.

Really useful tip, thanks for this. I tried this and after a few hours trying I get this working. Now my AS3 site have all fonts embed and look great. Thanks again for share your brain. ;)

Don't work for me, I use Mac, there are some trick to this work with Mac.? Thanks for help.

It does work for me in Flash CS3 but only after running the update from march this year. Hope this helps.

Hey, I get “VerifyError: Error #1014: Class IFlexAsset could not be found” just as soon as the font file created by the above method finishes loading Any ideas?

Been using this technique since first reading it and its been great. However i recently noticed something i had overlooked before due to the fact that i wasnt reading the content of the text displayed in the embedded font (its just testing stuff right?). Anyways, the problem is that when generating the SWFs with flexbuilder 2.0.1, it seems to create graphic artifacts and deformations depending on the original font file. Any idea?

I only using AS2. But great article. Tx

Doesn't work for me, I use Mac, are there some tricks to let this work with a Mac.? Thanks for help.

Hey, I get “VerifyError: Error #1014: Class IFlexAsset could not be found” just as soon as the font file created by the above method finishes loading Any ideas? I Also get this error, would be great if anybody could help!!!

Hey, this may be a little off topic but I really like that star shape logo type. Looks gorgeous! Keep the good work up!

Thanks for the tip, this worked great! A Really useful tip!!

It does work for me in Flash CS3 but only after running the update from march this year. Hope this helps.

Works very well.

Really nice blog and nice articles.

I'll have to look into FlashDevelop here at work : - ) Thanks for all of you're help, you're being quite awesome (and great site you've got here).

Great, so far I have been on the right way but always obtained that failure messege when trying to embed outside the class and wasn´t able to work it out. Thanks for your sophisticated post and your help! Nice work:)

Hi, I'm just getting startet with font embedding in code using FB3 and compiling in Flash on Mac. I haven't gotten around to actually try to use the embedded fonts in the application yet because a compiler warning (in Flash) keeps annoying me: Warning: 1110: The constant was not initialized.

really good work, but I use AS 2 Greetings Bayerischer Wald

Good article! your site let me learn more. Thanks!

Really nice, works very well. THX a lot!!!

@ Girokonto: I have the new update and it doesn´t work. Any ideas what the problem can be?

Wow, this is good stuff. Just bookmarked. Cheers!

I tried this and after a few hours trying I get this working. Now my AS3 site have all fonts embed and look great.

Can you explain how the constant is associated with the font? In the code there is nothing that assigns a value to the String constant, and there is nothing in the Embed statement that points to the constant. Is it just the proximity of the Embed to the const definition? If so, isn't that more that a little bit odd? Why on earth would the compiler work that way? I would expect an explicit link between the two lines of code. This kind of "magic" association doesn't sit well with me at all.

Well, my faith in the compiler has been restored, but my experience with the blog post is a failure. When I compile the above code with Flash CS3, I receive this warning: "Warning: 1110: The constant was not initialized." Am I missing something, or is this code only for Flex?

@RickW : The font embedding is done through the meta-tag - as far as I know that's just how the syntax is for being able to reference the item being embedded through the meta-tag, which would typically be images that you would need to reference. For fonts I'm not aware that the constant is actually used. Regarding the code itself, it should work in any environment as the embedding is done by the compiler. Personally I typically use code-only projects in FlashDevelop. Are you just putting code on a timeline or are you including classes? If you're putting it on the timeline then you should be able to change "private static var" to just "var".

Also, if you're getting that warning ( which is only a warning, shouldn't prevent compile ) you can either assign a value to the constant ( public static const MYFONT:String = ""; ) or you can change it to a variable ( public static var MYFONT:String; ).

Nice. This has probably saved me a few hours of searching. Thanks for providing this info!

Hi Mike, I went thru your technique in embedding fonts. But the problem that I'm having is that the text is not displaying in the stage. I place a border around the text label, and I see only a tiny box. I checked my code, and it seems ok, and I trace it and it comes out fine, but I'm baffled why the text is not displaying. If you might be able to help me I would appreciate it. Thanks. [CODE] package com.bruno.utils { import flash.utils.describeType; import flash.display.MovieClip; import flash.text.TextField; import flash.text.TextFormat; import flash.text.AntiAliasType; import flash.text.TextFieldAutoSize; public class CenturyFont extends MovieClip { [Embed(source = "C:\WINDOWS\Fonts\comic.ttf", fontFamily = "Comic Sans MS")] public function CenturyFont() { var textFormat:TextFormat = new TextFormat(); textFormat.font = "Comic Sans MS"; textFormat.color = 0x000000; textFormat.size = 16; var textLabel:TextField = new TextField(); textLabel.embedFonts = true; textLabel.autoSize = TextFieldAutoSize.LEFT; textLabel.antiAliasType = AntiAliasType.ADVANCED; textLabel.defaultTextFormat = textFormat; textLabel.border = true; textLabel.text = "Hello World!"; addChild(textLabel); textLabel.x = textLabel.y = 50; } } } [/CODE]

Hi Mike, I'd been having some trouble embedding bold fonts and kept getting an error when transcoding. I took a guess that possibly there was a property on the embed tag called 'fontWeight' (pretty much the same as css) and it works, but don't seem to be able to find any documentation about what other properties Embed tags have? (for fonts or anything else) I was wondering if you've come across this whilts working with fonts in AS3? cheers, Barry

@Bruno : I've sent you a sample project, hopefully that helps. I should throw up a follow-up post with that.

@barry : I had run across that as well. The same goes for italic variations. The superbly unfortunate part is that if you're doing something like an editor that offers multiple fonts along with their variations, you need to essentially embed 3 fonts ( normal, bold, italic ) to get them working. One of the reasons I'd really like to see shared libraries ( or at least some type of dynamic font management ) better sorted out. I had come up with a solution that was based off some AS2 work for dynamically loading font swfs, but I would have to recreate it.

Thanks for sharing this useful information. Great article...

Hey, this may be a little off topic but I really like that star shape logo type. Looks gorgeous! Keep the good work up! Greets Skischule

The Font Embedding in AS3 is a very nice Tutorial for newcomer, thanks. Best regards Wellness

can i apply this tutorial into flash to get the flash application mobile without worrying about the font problem in any computer?

Nice. This has probably saved me a few hours of searching. Thanks for providing this info!

The article of Marcos Weskamp is not really clear and difficult to understand for beginners.

Great article. Thanks for sharing that usful informations.

Nice! Worth bookmarking!!!

Thank you! Worthful informations. Nice article

Hi Mike, this font-embedding-guide for AS3 really helps me a lot. Thanks for publishing this information. ;-) God bless you...

Hi Mike, it's not really clear from the comments, does this work with Flash CS3? And if so, does it only work on a PC? I've been going though all of this and it does not seem to work at all in Flash CS3 Mac. If anyone has gotten it to work I would love to see a source file...

@ Anonymous: yes it only work on a pc. It´s disappointing but a fact! http://www.inszenio.de

Useful post. Thanks to this I learn to embed fonts correctly.

A useful instruction. Easy convertible. Thanks!

Thanks for publishing these good infos... ;-)

good instructions indeed, thank you.

Really useful tip, thanks for this.

This did not work for me until I did: textField.embedFonts = true; very happy now

Thank you for the extensive Snipped. Today I've been all day Dannacher searched on the Internet. Above all, the whole was well described in the article. Dear Konto

Hi, I can't make this work. I read it over and over again, and nothing happens. The only way to see text on the result swf, is to use format.font="Arial"; no matter if I embed or not "Arial" font, with other font registered on the system, don't work (I try to use "Cacue", but "Verdana", "Times new roma", etc, didn't work too.) If you can give me a ligth I've very pleased. Thanks in advance

Hi again, sorry for this, but, i've not read all other post before, so my problem is just the same of Bruno, almost a year ago.

This is really informative, i've just put it in my bookmarks !

I use the same as above but it refuses to recognize the font. On the other hand if i specify the system font name it is able to identify it in the text area. I am trying to modify the htmlText of a text area using a custom embedded font. Please help

I've been searching for a good explanation of how to embed fonts in AS3 and your article answers my questions. Thanks for sharing this information.

I have been trying to get this to work and am stumped. Is there somewhere that I can get a working copy to pick apart?

Hi Maybe you can help me with a problem I am having. The URL of the project is: http://www.mauriciogiraldo.com/vgline/beta/ It is a Drupal-powered, AMFPHP-connected AS3 web app. The data goes in with no problem, I have verified that UTF-8 is fine and all. The problem can be better seen in these URLs: http://www.mauriciogiraldo.com/vgline/beta/#/146 A plaintext version of that link: http://www.mauriciogiraldo.com/vgline/node/146 Note the name of the guy. The font is Inconsolata. You can see that I have embedded the font (I even opted for the dynamic textfields to embed the whole thing, full charset) as well as the "New Font" menu in the library. Inconsolata shows up with an asterisk (which according to Adobe documentation means the thing is embedded). I have tried other font embedding options to no avail. Inconsolata seems to have that O character when used in the authoring but it is not showing up in the dynamic texts. Another problem I am having: if I use static text fields the font doesn't get embedded. I have to convert the field to dynamic and then it works ("the videogame history timeline" top left is a dynamic text field although I would prefer it not to be... that and others). The text in the small version events is a text field put manually via Flash CS4 and the detail (when you click an event) is AS3-created (as well as the search results). I am embedding the text via HTML (.htmlText) and styling with CSS. The whole code is open source and can be found here: http://code.google.com/p/vgline/ An example of how I fill in a text field can be found here: http://code.google.com/p/vgline/source/browse/trunk/src/TLDetail.as ANY help will be greatly appreciated. I really don't know what to do. Thanks

sorry for the formatting... thought the comment box would preserve line breaks etc. I created a fully-formatted version of this question here: http://stackoverflow.com/questions/2079551/fonts-not-being-embedded-flash-cs4-as3

Thank you, thank you, thank you!!!!

I like your stuff.

One thing to mention is that, if you want to use HTML text in a TextArea control and you want to have normal text, italic text, bold text, bold+italic text all combined in the same HTML text with the same font family, you need to declare all corresponding fonts WITH THE SAME FONT FAMILY NAME and specify the nature of the font with the fontWeight and fontStyle properties in the metadata to embed the font properly. Then, you specify that fontFamily for the TextArea and you can use the and tags. [Embed(source="assets/fonts/LT_21142.ttf", fontWeight="normal", fontStyle="normal", fontFamily="DeutscheBankUnivers", mimeType="application/x-font")] private static const DeutscheBankUnivers430RegularClass:Class; [Embed(source="assets/fonts/LT_21143.ttf", fontWeight="normal", fontStyle="italic", fontFamily="DeutscheBankUnivers", mimeType="application/x-font")] private static const DeutscheBankUnivers431RegularItalicClass:Class; [Embed(source="assets/fonts/LT_21146.ttf", fontWeight="bold", fontStyle="normal", fontFamily="DeutscheBankUnivers", mimeType="application/x-font")] private static const DeutscheBankUnivers630BoldClass:Class; [Embed(source="assets/fonts/LT_21147.ttf", fontWeight="bold", fontStyle="italic", fontFamily="DeutscheBankUnivers", mimeType="application/x-font")] private static const DeutscheBankUnivers631BoldItalicClass:Class;

It is really hard to do something like this. I tried anyway

Could someone post a downloadable version with a single text field and multiple font-weights using external HTML and CSS like you can do in the real web?

Any idea how can give those font name into external css file?

Very nice work, thx a lot for publishing. Best regards from germany.

Thanks for this info, this issue has been bugging me like crazy for the last couple of days.

Thanks for sharing.

Usefull article,thanks for sharing.I would be glad if you could give me a downloadable version.

Using rich HTML text formatting with embedded fonts: http://cookbooks.adobe.com/post_Using_rich_HTML_text_formatting_with_embedded_font-16974.html

Hi, Thanks for the post. I found it very useful. I'm wondering why the swf size doesn't get bigger if you put text and choose whatever font using the adobe flash IDE(eg.flash cs4). Does it mean that the font uesd is not embedded font? But the font is shown correctly on any machine without the used font on it. How does it work? I'd really appreciate it, if you could explain it to me. Many thanks.

thanks for this article,it is very usefull for me.Thanks for sharing to us.

Nice post. I really liked it.. Don't forget to update it regularly. I am looking for new updates dying to read more stuff from you.

Same problem as Bruno. I've tried several ways that all looks like yours, but finally i just have a tiny little box (border = true). I don't understand, because Fonts are correctly loaded (check thanks to enumerateFonts()) Could you please send me the sample project to, or maybe do an edit and add it to your post ? Thanks

This procedure doesn't work for me (CS4, OS X). I get an empty TextField. But I found a way to make it work. Instead of this: [ Embed ... ] private static var EMBEDDED_FONT:String; I do this: [ Embed... ] private static var EMBEDDED_FONT:Class; (Note: Class instead of string) Then, assuming that statement is in a class called Assets, when I want to use that font in another class, I do this: import flash.text.TextField; import flash.text.TextFormat; import flash.text.Font; //

Arg. I didn't know linebreaks wouldn't work. Here's a link to what I do: http://www.grumblebee.com/stuff/stuff/fonts.txt

Font Embedding in AS3 : Lessons Learned

Others Have Said

Have Something to Say?

Categories

Recent Entries

Recent Comments

External Links

Most Viewed Posts