Externalize Font with font subset, font weight and font style at the same time

You have a flash / flex application where you want to allow users to customize the text formatting, font style / font weight for some text box. So you would provide a small set of fonts which would all get embedded into the swf.

If we working with external fonts in Actionscript 3.0, the external font must have a class definition for allowing the Font class and ApplicationDomain to detect and register it. We can produce class definition for the external font  with embed tag in Flex or Font symbol in Flash library. 

In Flash CS3 you can create a font symbol in the library, and export it for ActionScript. But with this way if you embed the font in the library then flash automatically embeds all available characters. So the compiled external font swf size will increased and bloated the load-time with unused fonts. This was the largest issues especially if we working with Asian fonts. You can find more informations about it in this nice article

With Flex 3.0 and mxmlc (Flex SDK 2-3) there’s the embed metatag where you can even define font character ranges which should be embedded for reducing compiled external font swf size:

1. [Embed(source='font.ttf', fontName='Font Name', unicodeRange='U+0021-U+0021, ... , U+2122-U+2122')]

or with this tag :

1. [Embed(source='font.ttf', fontName='Font Name', fontWeight='bold', fontStyle='italic')]

Another nice article here

Unfortunatelly if we combining subset tag (unicodeRange) with fontWeight / fontStyle tag will cause a Flex compile error. I hope in Flex 4 this issue fixed.

This article explain the same approach, but it need to add extra font family (Bold or Italic) at specific font but Flex will still treat them as separate fonts.

 

All the examples (both Flash CS3 or Flex 3.0) I’ve seen so far only address the loading of one font either in regular weight or bold, but not one (subset characters ranges) fonts with regular, weight, italic or bold-italic at the same time. And it seem very difficult for export one (subset characters ranges) font as external font, (ie loading the font from an external swf) and change font weight / font style at runtime in loader (main app) swf.

Luckily I was able make something worked, here what I did :

1. Embed font in FLA file with instance textfield at the stage (Benefit: we can make subset of required glyphs only, and font style/weight). We need create four instances textfield (Regular, Bold, Italic and Bold-Italic texfield) and publish the swf for each font, (ie. Verdana_Style.swf for Verdana). In this step the published swf doesn’t contain class definition yet. So we can not import it at runtime.
   
2. Transcoding the published swf (also give a class definition) with Flex 3.0 compiler with Embed metatag and publish to final external swf font (i.e Verdana.swf)
   package
   {
    import flash.display.Sprite;
    import flash.text.Font;                         
   
   public class Verdana extends Sprite
    {
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana')]
      public static var regular:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontWeight='bold')]
      public static var bold:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontStyle='italic')]
      public static var italic:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontWeight='bold', fontStyle='italic')]
      public static var boldItalic:Class;
   
   public function Verdana()
      {
        super();
   
     Font.registerFont ( regular );
        Font.registerFont ( bold );
        Font.registerFont ( italic );
        Font.registerFont ( boldItalic );
      }
   
   }
   }
3. Import the final external swf font at runtime to main application.
   Here the simple actionscript 3.0 with Lithos Pro Regular font demo.
   package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.text.*;    
   
   public class DemoExternalFontSimple extends Sprite
    {
      public static const FONT_NAME:String = 'Lithos Pro Regular';
      public static const FONT_LIB:String = "LithosProRegular.swf";
   
   public function DemoExternalFontSimple ()
      {
        loadFont ('fontlib/'+FONT_LIB);
      }
   
   private function loadFont ( url:String ) : void
      {
        var loader:Loader = new Loader ();
        loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, fontLoaded );
        loader.load (new URLRequest ( url));
      }
   
   private function fontLoaded ( event:Event ) : void
      {
        drawText();
      }
    }
   }
      public function drawText () : void
      {
        var tf:TextField = new TextField ();
        tf.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0);
        tf.embedFonts = true;
        tf.antiAliasType = AntiAliasType.ADVANCED;
        tf.autoSize = TextFieldAutoSize.LEFT;
        tf.text = FONT_NAME + " Regular was here...:;*&^% ";
        tf.selectable = false;
        tf.rotation = 1;
        tf.x = 10;
        tf.y = 10
   
   var tf2:TextField = new TextField ();
        tf2.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0, true);
        tf2.embedFonts = true;
        tf2.antiAliasType = AntiAliasType.ADVANCED;
        tf2.autoSize = TextFieldAutoSize.LEFT;
        tf2.text = FONT_NAME + " Bold was here...:;*&^% ";
        tf2.selectable = false;
        tf2.rotation = 1
        tf2.x = 10;
        tf2.y = 50
   
   var tf3:TextField = new TextField ();
        tf3.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0, false, true);
        tf3.embedFonts = true;
        tf3.antiAliasType = AntiAliasType.ADVANCED;
        tf3.autoSize = TextFieldAutoSize.LEFT;
        tf3.text = FONT_NAME + " Italic was here...:;*&^% ";
        tf3.selectable = false;
        tf3.x = 10;
        tf3.y = 100
   
   var tf4:TextField = new TextField ();
        tf4.defaultTextFormat = new TextFormat(FONT_NAME, 16, 0, true, true);
        tf4.embedFonts = true;
        tf4.antiAliasType = AntiAliasType.ADVANCED;
        tf4.autoSize = TextFieldAutoSize.LEFT;
        tf4.text = FONT_NAME + " Bold Italic was here...:;*&^% ";
        tf4.selectable = false;
        tf4.x = 10;
        tf4.y = 150;
   
   addChild(tf);
        addChild(tf2);
        addChild(tf3);
        addChild(tf4);
      }