Apr 13, 2009

Embedded fonts that work with Flash IDE and Flex SDK

In a recent project we had problems with the embedding for the fonts. Since we work with both the Flash IDE and the Flex SDK (eclipse FDT) at my work we needed something that worked when compiling in the Flash IDE but also when compiling with fcsh (Flex Compiler Shell). I tested most of the techniques out there but found that most of them didn't work as I wanted together with the Flash IDE. So I just couldn't get them to work for both.

So here is an easy way to do it that work with flash IDE and fcsh. First you need one file for every font you need to embed. Here is an example on how it could look like.

Arial_Black.as

PLAIN TEXT
Actionscript:
  1. package com.arwidthornstrom.assets {
  2.     import flash.text.Font; 
  3.  
  4.     [Embed(source = '../../../material/Arial_Black.ttf', fontName='ArialBlack' )]
  5.     public class Arial_Black extends Font {
  6.            
  7.     }
  8. }

The important thing is that it extends Font and that you use the [Embed to embed the font in the swf. You can of course add fontWeight and unicodeRange if you want to. But its not important in this example. When you got all the font files you just need to export the FontLibrary.as

FontLibrary.as

PLAIN TEXT
Actionscript:
  1. package com.arwidthornstrom.assets {
  2.     import flash.display.Sprite;   
  3.     import flash.text.Font; 
  4.  
  5.     public class FontLibrary extends Sprite {
  6.        
  7.         public static const ARIAL_BLACK:String = "ArialBlack";
  8.         
  9.         public function FontLibrary() {
  10.             Font.registerFont(Arial_Black);
  11.         }
  12.     }
  13. }

To make it easy to use I add a public static const with the fontname, then you can use FontLibrary.ARIAL_BLACK when you create the textformat. When you load this into whatever framework you are using it will automatically register the fonts with the Font class.

Export the FontLibrary.as either with fcsh or just set it as DocumentClass in the Flash IDE. Now you just load the fontlibrary.swf into whatever swf you like and the use FontLibrary.ARIAL_BLACK when you need that font.

FontTest.as

PLAIN TEXT
Actionscript:
  1. package {
  2.    
  3.     import com.arwidthornstrom.assets.FontLibrary;
  4.     import flash.display.Sprite;
  5.     import flash.display.Loader;
  6.     import flash.text.TextField;
  7.     import flash.text.TextFormat;
  8.     import flash.text.TextFieldAutoSize;
  9.     import flash.net.URLRequest;
  10.     import flash.events.Event;
  11.    
  12.     public class FontTest extends Sprite {
  13.        
  14.         private var _ldr:Loader;
  15.         private var _text:TextField;
  16.        
  17.         public function FontTest() {
  18.            
  19.             _ldr = new Loader();
  20.             _ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
  21.             _ldr.load(new URLRequest("fontlibrary.swf"));
  22.            
  23.         }
  24.        
  25.         private function completeHandler(e:Event):void {
  26.            
  27.             trace("FONTS LOADED");
  28.            
  29.             _text = new TextField();
  30.             var format:TextFormat = new TextFormat(FontLibrary.ARIAL_BLACK, 30, 0xFFFF00);
  31.             _text.defaultTextFormat = format;
  32.             _text.autoSize = TextFieldAutoSize.LEFT;
  33.             _text.embedFonts = true;
  34.             _text.text = "ARIAL BLACK arial black";
  35.            
  36.             _text.x = 20;
  37.             _text.y = 20;
  38.            
  39.             this.addChild(_text);
  40.         }
  41.        
  42.     }
  43.    
  44. }

It is important to not use the FontLibrary before the fontlibrary.swf is loaded.

Links:

http://www.betriebsraum.de/blog/2007/06/22/runtime-font-loading-with-as3-flash-cs3-not-flex/

http://blog.sitedaniel.com/2008/10/fontcontrol-class-external-font-library/

Source:

Download the source

Category: Action Script 3.0, Flash

Tagged: , ,

2 Responses

  1. Sebastian says:
    April 13, 2009 at 15:20

    Hey man.
    Thank you so much, i’v been having this problem for a while now. This article helped me alot. Thanks dude

    / Sebastian

  2. Aaron Nance says:
    September 22, 2009 at 21:47

    Thanks for a simple method for embedding fonts without having to deal with Flex’s asset proxy classes. It would be nice if Adobe would have put something like this in their documentation. They just kind of leave you guessing how to embed fonts if you aren’t using MXML.