Using mxmlc Embed fonts with TextField

Posted on July 22, 2010 | 4 comments

NOTE: From Josh’s comment below you can do this in the Embed metadata. See the end of the post for updated code.

With the latest drops of the Flex SDK, 4 and higher, the compiler mxmlc has changed. One of the changes is that it defaults the Spark components to use Text Layout Framework (TLF) for Text fields. TLF is a Flash Player 10.0 plus feature and is built up on the flash.text.engine classes. The mxmlc compiler has allowed you to embed classes through CSS or actionscript with the use of [Embed] metadata.

With the latest mxmlc changes when you use Embed metadata for embeding fonts it embed by default the font as “embeddedCFF” type. This type of embedding of the font is required for the new TLF framework, thus making this type of embed fonts unusable with the plan old TextField and TextFormat. But there is a compiler option to change the way mxmlc embeds the font as a compiler argument. The compiler argument is:

-managers=flash.fonts.AFEFontManager

This is good to know if you are playing with ActionScript 3.0 only projects and want to use the Embed metadata and embedding fonts for use with TextField. Of course you can always just learn TLF and be on your way.

Here is a simple AS3 only application to test some embedding fonts:

package
{
    import flash.display.Sprite;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
   
    public class EmbedFontTest extends Sprite
    {
       
        [Embed(source="MYRIAD.TTF", fontFamily="MyriadEmbed", mimeType="application/x-font")]
        public var MyriadEmbed:Class;

        public function EmbedFontTest()
        {

            var format:TextFormat = new TextFormat();
            format.size = 36;
            format.font = "MyriadEmbed";
            format.color = 0xFCF374;
           
            var tf:TextField = new TextField();
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.embedFonts = true;
            tf.width = 100;
            tf.height = 60;
            tf.text = "hello";
            tf.setTextFormat(format);
           
            var names:String = "";
            var fonts:Array = Font.enumerateFonts();
            for each (var key:Font in fonts)
            {
                names += key.fontName + " - " + key.fontStyle + " - " + key.fontType;
            }
           
            var tf2:TextField = new TextField();
            tf2.autoSize = TextFieldAutoSize.LEFT;
            tf2.width = 300;
            tf2.height = 500;
            tf2.y = 120;
            tf2.text = names;
           
            addChild(tf);
            addChild(tf2);
        }
    }
}

With out the “-managers=flash.fonts.AFEFontManager” compiler argument added to the compiler arguments the above code will not show the yellow text “hello”.

UPDATE:
The most efficient way to do this is to embed the font as a class that extends flash.text.Font. Here is the new Font class called MyFont.as:

package
{
    import flash.text.Font;
   
    [Embed(source="MYRIAD.TTF", fontFamily="MyFont",
            embedAsCFF="false", mimeType="application/x-font")]
    public class MyFont extends Font
    {
        public function MyFont()
        {
            super();
        }
       
    }
}

And then the main application looks like this:

package
{
    import flash.display.Sprite;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
   
    public class EmbedFontTest extends Sprite
    {
        public function EmbedFontTest()
        {
            var fontIns:MyFont;
            var format:TextFormat = new TextFormat();
            format.size = 36;
            format.font = "MyFont";
            format.color = 0xFCF374;
           
            var tf:TextField = new TextField();
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.embedFonts = true;
            tf.width = 100;
            tf.height = 60;
            tf.text = "hello";
            tf.setTextFormat(format);
           
            var names:String = "";
            var fonts:Array = Font.enumerateFonts();
            for each (var key:Font in fonts)
            {
                names += key.fontName + " - " + key.fontStyle + " - " + key.fontType;
            }
           
            var tf2:TextField = new TextField();
            tf2.autoSize = TextFieldAutoSize.LEFT;
            tf2.width = 300;
            tf2.height = 500;
            tf2.y = 120;
            tf2.text = names;
           
            addChild(tf);
            addChild(tf2);
        }
    }
}
  • Pingback: Tweets that mention Renaun's thoughts on Using mxmlc Embed fonts with TextField -- Topsy.com

  • Jeff

    Renaun,

    I just upgraded to Flash Builder 4.01 and suddenly I getting a number of warnings of the type “This component requires that the embedded font be declared with embedAsCff=true” yet I am embedding the font with that metadata in my css file. I tried setting the compiler argument as you mentioned but no dice.

    Here’s an example of how I’m embedding the font:

    @font-face
    {
    src: url(“/css/fonts/MyriadWebPro.ttf”);
    fontFamily: main;
    font-style: normal;
    font-weight: normal;
    advancedAntiAliasing : true;
    embedAsCff:true;
    }

    Jeff

    • http://www.renaun.com Renaun Erickson

      What components? In Flex 4 Spark components use TLF, which is embedAsCff, the MX components use the old embed type of Fonts.

  • http://joshblog.net/ Josh Tynjala

    You can also add embedAsCFF=”false” in the Embed metadata.

    • http://www.renaun.com Renaun Erickson

      I was thinking there would be a option in the metadata. Thanks for the info.