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:
12345var 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:
12[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.
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.
Thank you very much for this post – helped me a lot … 🙂
Oh!
It *doesn’t work* in CS4 – thank you. I didn’t find documentation of this backwards incompatibility anywhere but here. You may have just saved my job, if not certainly several more hours of work with your astute observation. Cheers.
~
Thanks for the help, tricky subject.
I’ve followed this all the way down to attaching the code my style sheet. It seems like every time I remove the defaultTextFormat line and try to attach an external style sheet I loose my text.
I am loading the text and multiple fonts via XML. Any ideas?
//////////code
var myHtmlText:TextField = new TextField();
myHtmlText.width=contentWidth-10;
myHtmlText.antiAliasType=’advanced’;
myHtmlText.embedFonts=true;
myHtmlText.multiline=true;
myHtmlText.wordWrap=true;
myHtmlText.autoSize=TextFieldAutoSize.LEFT;
myHtmlText.defaultTextFormat = new TextFormat(“H1”, 30, 0x000000);
//myHtmlText.text = “this is dynamic text on stage, no css”;
myHtmlText.htmlText = pageText; //this is the variable for my XML
myHtmlText.styleSheet = sheet; // my style sheet “sheet” is the first this to load followed by my XML
Many Thanks!
Sylvia
this worked. you’re awesome. thank you.
This works great – wanted to tell you that I have been using this as a method of font embedding for quite some time.
As a side note, in Flash CS5 you can now create Font library symbols for dynamic text fields (or even text fields created via pure AS3 code).
In other words, it looks like Adobe finally made this easier to do. But your idea was still the best and I used it a ton!!!
Keep one thing in mind: You cannot embed a font you use otherwise in your swf. For example: You have used “Arial” as static text in your swf. If you try to embed the same font, “Arial”, for dynamic text fields – it WILL not work. This cost me hours to figure out.
Thank you very much!
I’ve usually used Flash IDE for fonts embeding, but now I don’t need it at all. Here is the source file (http://code.google.com/p/flashdevelop/source/browse/trunk/FD4/FlashDevelop/Bin/Debug/Templates/ProjectFiles/AS3Project/Font+Library.as.fdt?r=1763) that compiles *.swf with embeded fonts under Flex Builder or Flash Develop (I’m using the last one). Notes like “how to use” inside *.as file. Really helpfull!
I’ve been trying to embed Helvetica via static text on flash CS5 (like ‘Mark A.’).
This is what I selected on flash;
-Classic
-Static Text
-anti-alias: Use device font
Publish settings > HTML > Device Font (checked)
The reason i chose this method is because the text is much more clean and sharper with helvetica than if I select ‘input’ or ‘dynamic’ and then select ‘anti-allias for animation’ or ‘anti-alias for readability’ (which compresses everything).
– Unfortunately, this method doesn’t work on other machines who don’t have Helvetica installed. The font is replaced automatically by New Times Roman or something else….:-/// My SWF hasn’t embeded Helvetica?
I don’t see the point why Adobe is letting users learn to embed font if it doesn’t even work with any fonts! It’s a waste of time….Who’s going to embed ‘Arial’?? Everybody has it…
Other people have had the same problem as me;
http://www.gotoandlearnforum.com/viewtopic.php?f=29&t=32233&hilit=Static+Text+is+not+embedding
Any idea where I can simple method where I can embed fonts internally? I like to work on the timeline. I’m a newbie on AS3 and I try to stay away from text fields created via pure AS3 code. But if this is the only way today to embed a font and have the best resolution then I’m willing to go there.
..Any idea where to get a source file that’s easy to work with? A source file with a font embedded inside the swf?
Thanks for reading!
Is there a way to
Hi All,
I am creating a web application where I am loading the multiple swf files containing the custom user fonts.
Here is the example :
protected function loadFonts(event:MouseEvent):void
{
fontSWF = new Loader();
var req:URLRequest = new URLRequest();
req.url = “assets/fonts/ClearviewATT.swf”;
var context:LoaderContext = new LoaderContext( true, new ApplicationDomain(ApplicationDomain.currentDomain) , SecurityDomain.currentDomain );
fontSWF.load( req , context );
fontSWF.contentLoaderInfo.addEventListener(Event.COMPLETE, onClearviewATTFontLoaded,false,0,true);
}
public function onClearviewATTFontLoaded( event:Event ):void {
fontSWF.contentLoaderInfo.removeEventListener(Event.COMPLETE, onClearviewATTFontLoaded);
var dom:ApplicationDomain = event.target.applicationDomain;
var FontClass:* = dom.getDefinition(‘ClearviewATT’) as Class; // same as in FlashFile
var font:* = new FontClass();
Font.registerFont(FontClass); // Works. !! I have checked with Font.enumerateFonts();
text.setStyle(‘fontFamily’,font.fontName); // Doesn’t work. !! FontName is correct
text.setStyle(‘fontWeight’,’bold’); // Doesn’t work
}
The same code works if I load a font that is already installed (e.g. Segoe) but any of the custom font isn’t applying.
Help Please.