There are several ways to embed fonts for use in Flash projects. One of the most common ways in Flex (that is now supported in Flash with CS4) is using the Embed metadata tag with unicode ranges. Lee has a good example of using this technique with Flash CS4 on gotoAndLearn(). This seems to be the suggested best-practice technique, but I still don’t find it the easiest.
Instead, I like to use Flash’s character embedding options when possible:
- Create a new Flash file and add a dynamic text field on stage (I usually like to enter in the name of the font I’ll be embedding as the field’s text).
- Select the text field’s font (family and style in CS4).
- Now open the Character Embedding panel and select the range of characters you would like to embed. You don’t want to embed the entire font or else your SWF will be very bloated.
- Now to be able to use this font you need to be able to reference it. Before Flash CS4, this was typically the font name that you selected from the font list. In CS4 however this doesn’t work. With CS4, Flash has finally updated their font list to match how other Adobe products list fonts (by family with styles grouped under the family). This is much better when looking for a specific font and trying to match fonts used in Photoshop, etc but it does make it more confusing when trying to determine the name of the font to reference for our purposes. To confirm what font name to reference add the following script to the Flash file to iterate over the embedded fonts:
var fontList:Array = Font.enumerateFonts(); for( var i:int=0; i<fontList.length; i++ ) { trace( "font: " + fontList[ i ].fontName ); }This will list out all of the embedded fonts in the Flash file by the name you should use to reference them.
- Compile the Flash file and your external font SWF is ready for embedding.
- Now create a Flex or ActionScript project in Flex Builder and create a property to reference your font like this:
[Embed( source="/assets/swf/fonts.swf", fontFamily="Helvetica Neue LT Std 95 Black" )] public static var HelveticaNeueLTStd95Black:Class;
In the Embed metadata, set the source parameter to point to the SWF we created and set the fontFamily parameter to the font reference we discovered above using enumerateFonts(). The actual property name of the Class can be anything you want.
- Add a TextField in your project and set its embedFonts property to true. There are two ways to use the embedded font with this TextField:
- Create a TextFormat object and set the font property to the fontFamily name you used in the Embed tag above. Now set the defaultTextFormat of the TextField to this TextFormat object.
- Create a CSS file and set the font-family property of a selector to the fontFamily name you used in the Embed tag above. Load and parse the CSS into a StyleSheet object and set the styleSheet property of the TextField to this StyleSheet object. Make sure your text is using the selector from the CSS file.
That’s it!
No need to figure out the unicode range of the characters you want to embed. Just use Flash’s Character Embedding panel that you’ve probably been using forever.
It should be noted that Lee’s technique referenced at the top of this post is probably still the best way to do runtime font loading.
2 Comments
Hi, the tutorial worked fine. thanks.
I was wondering if someone knows how to include all possible english characters. The gotoAndLearn tutorial only shows embedding A-Z.
Interesting technique. A problem with it that’s worth mentioning, however, is that your font library swf is only external in the authoring stage. When compiling, the font library swf embeds in with your main swf. When this happens, several of the benefits of even having a font library disappear such as:
1. Authoring time-saving: Saving time on compiles so that you’re not compiling the font as well every time you compile.
2. Runtime time-saving: Only loading a font when needed reduces initial load time on your main swf, and obviously means your font won’t be loaded at all if not needed.