Embedding fonts in Flex 4

The following example shows how you can embed a font in the Flex 4 and use the embedded font with the new Spark RichEditableText class.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ -->
<s:Application name="Spark_DefineFont4_cff_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        creationComplete="init();">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        @font-face {
            src: url("assets/ACaslonPro-Regular.otf");
            fontFamily: "ACaslonProRegularEmbedded";
            embedAsCFF: true;
        }
 
        s|RichEditableText {
            fontFamily: ACaslonProRegularEmbedded;
            fontLookup: embeddedCFF;
            fontSize: 34;
        }
    </fx:Style>
 
    <s:RichEditableText id="textView"
            text="The quick brown fox jumped over the lazy dog. 01234567890"
            width="400"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ -->
<s:Application name="Spark_DefineFont4_cff_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        creationComplete="init();">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import spark.primitives.RichEditableText;
 
            [Embed(source="assets/ACaslonPro-Regular.otf",
                    fontFamily="ACaslonProRegularEmbedded",
                    mimeType="application/x-font",
                    embedAsCFF="true")]
            private const ACaslonProRegularEmbeddedFont:Class;
 
            private var richEdTxt:RichEditableText;
 
            private function init():void {
                richEdTxt = new RichEditableText();
                richEdTxt.text = "The quick brown fox jumped over the lazy dog. 01234567890";
                richEdTxt.setStyle("fontFamily", "ACaslonProRegularEmbedded");
                richEdTxt.setStyle("fontSize", 34);
                richEdTxt.width = 400;
                richEdTxt.horizontalCenter = 0;
                richEdTxt.verticalCenter = 0;
                addElement(richEdTxt);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

For examples of embedding fonts in earlier versions of Flex (Flex 3 and earlier), see the Font tag archive at http://blog.flexexamples.com/category/fonts/.

31 thoughts on “Embedding fonts in Flex 4

  1. Hey Peter,
    i’m working a while with the Flex SDK 4.

    And something seems to be wrong with the Matrix3D Class (flash.geom.Matrix3D). The FB doesn’t sees the Class, FDT does – yes both have the same SDK Path.

    And while trying your example, FB tells me, that he can not find Matrix3D. FB says that, when i use the Gumbo Namespace xmlns=”http://ns.adobe.com/mxml/2009″.

    Any ideas?
    Feel free to send me an E-Mail! ;-)

    g^2

  2. HEY! I am currently using flash, and am desperately trying to embed CFF fonts, but all i get is embedded fonts and notice you have imported fonts using this:

    @font-face {
    src: url(“assets/ACaslonPro-Regular.otf”);
    fontFamily: “ACaslonProRegularEmbedded”;
    cff: true;
    }

    I can’t find any “cff” property in flash that is not read only that I can set to true… was curious if you knew a way of doing the same type of embed in flash with actionscript or even the ui.

    Thanks!

  3. I have the same problem. I can’t find anything in the documentation
    on how to embed cff fonts in Flash. Thanks!

  4. sweet, thanks so much for the pointer and example, i will try this today. I still haven’t found a way just using the standard flash classes, but this looks like it should do the trick.

  5. I have been trying the code and use the CaflischScriptPro-Regular.otf as my font
    the structure and the cose is identical same with first example code

    @namespace s “library://ns.adobe.com/flex/spark”;
    @namespace mx “library://ns.adobe.com/flex/halo”;

    @font-face {
    src: url(“assets/CaflischScriptPro-Regular.otf”);
    fontFamily: “ACaslonProRegularEmbedded”;
    embedAsCFF: true;
    }

    s|RichEditableText {
    fontFamily: ACaslonProRegularEmbedded;
    fontLookup: embeddedCFF;
    fontSize: 34;
    }

    But still doesn’t make any change with the flex view, can you help me to fix the problems sir???I’m very confuse about this issue.

    1. @Gus Leo,

      Sorry, I don’t expect you’re still sitting by waiting for a response, but I was able to get the embedded CaflischScriptPro-Regular.otf font working with a Spark Label control, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo">
       
          <fx:Style>
              @font-face {
                  src: url("assets/CaflischScriptPro-Regular.otf");
                  embedAsCFF: true;
                  fontFamily: caflischDF4;
              }
          </fx:Style>
       
          <s:Label id="lbl"
                  text="The quick brown fox jumps over the lazy dog"
                  color="red"
                  fontFamily="caflischDF4"
                  fontSize="32"
                  horizontalCenter="0" verticalCenter="0" />
       
      </s:Application>

      Peter

  6. I’m using the Flex 4.0.0.10485 SDK and Flash 10, but the first example does not work. It wroks if I replace the Spark Label by a Halo Label… I’ve correctly defined the SDK to use… Any idea? I’m getting crazy about this frustrating problem…
    Thank you very much in advance,

    Jean-Marie

  7. Hello Peter,
    Thank you very much for your fast answer! I downloaded the latest nightly build, and now I have an “Unable to open framework_rb.swc” error message. I’m crawling the Web to find the reason but I’m unsuccessful until now. I’m a rookie with Flex technology, so I’ll go on searching, but maybe you have a good pointer to an explanation?
    Best regards,
    Jean-Marie

    1. I tried many, many fixes. For example, I explicitely added frameworks/locale/fr_FR/framework_rb.swc to the library path, through the “Project Properties” dialog. But I’m always having this problem. I also added the frameworks/locale/fr_FR/ as SWC directory, nothing is working…
      I also looked at the flex-config.xml file inside my C:\Program Files (x86)\Adobe\Adobe Flash Builder Beta 2\sdks\flex_sdk_4.0.0.13099\frameworks directory, and it does contain a reference to the locale directory:

      libs
      libs/player
      libs/player/{targetPlayerMajorVersion}
      locale/{locale}


      I even tried to add:

      locale/{locale}/framework-rb.swc

      Without success… ?!?
      Thank you in advance for any idea about that…
      Best regards,

      Jean-Marie

    2. @Jean-Marie,

      I’d try disabling RSLs and merging the framework code. Go to Project > Properties > Flex Build Path > Library path, and then select “Merged into code” from the Framework linkage drop down menu.

      Peter

  8. Thank you Peter, this framework_rb problem is now solved. However, I still cannot use the embedded fonts. When using the Flex debugger, I get the following error message at runtime:

    incompatible embedded font 'Jigsaw-Medium' specified for spark.components::Label (Label34) . This component requires that the embedded font be declared with embedAsCff=true.

    However, the font definition in my CSS looks like this:

    @font-face {
    src: url("/assets/fonts/JiMd____.ttf");
    font-family: "Jigsaw-Medium";
    embedAsCFF: true;
    }

    I tested with many nightly sdks, such as 4.0.13210, 4.0.13175, and 4.0.13099. Nothing works…
    I also read this thread, and tried the many suggestions, even the most surprising one, defining embedAsCFF to ‘false’…
    Any clue? Sorry for these numerous questions…

    1. @Jean-Marie,

      I don’t have the Jigsaw-Medium font, but the following code worked for me w/ 4.0.00.12985:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark">
       
          <fx:Style>
              @namespace s "library://ns.adobe.com/flex/spark";
       
              @font-face {
                  src: url("/assets/fonts/ARIAL.TTF");
                  font-family: "ArialCFF";
                  embedAsCFF: true;
              }
          </fx:Style>
       
          <s:Label id="lbl" 
                   fontFamily="ArialCFF"
                   fontSize="24"
                   text="The quick brown fox jumps over the lazy dog.{'n'}THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG." 
                   horizontalCenter="0" verticalCenter="0" />
       
      </s:Application>

      Peter

      1. Thanks a lot Peter for your fast answer. I’m still trying to find the cause of my problem. I already tried with other fonts, always the same problem… I’ll post here if I find an explanation to this problem and a solution…

  9. CFF embedding does not seem to be working in my case. I did the following test:

    @namespace s "library://ns.adobe.com/flex/spark";

    @font-face {
    src: url("assets/fonts/JiMd____.ttf");
    font-family: "JigsawMediumCFF";
    embedAsCFF: true;
    }

    @font-face {
    src: url("assets/fonts/JiMd____.ttf");
    font-family: "JigsawMedium";
    embedAsCFF: false;
    }

    @font-face {
    src: url("assets/fonts/arial.ttf");
    font-family: "ArialCFF";
    embedAsCFF: true;
    }

    <![CDATA[
    private function listFonts():void {
    var fontArray:Array = Font.enumerateFonts(true);
    ta1.text += "Fonts: \n";
    for(var i:int = 0; i


    I get the following result:

    Fonts:
    FONT 0:: name: ArialCFF; typeface: regular; type: embedded*
    FONT 1:: name: JigsawMedium; typeface: regular; type: embedded*
    FONT 2:: name: JigsawMediumCFF; typeface: regular; type: embedded*

  10. Sorry, my previous code excerpt was truncated (I did not read the red warning — too large font :-). Here it is again:

    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            creationComplete="listFonts()">
     
        <fx:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
     
            @font-face {
                src: url("assets/fonts/JiMd____.ttf");
                font-family: "JigsawMediumCFF";
                embedAsCFF: true;
            }
     
            @font-face {
                src: url("assets/fonts/JiMd____.ttf");
                font-family: "JigsawMedium";
                embedAsCFF: false;
            }
     
            @font-face {
                src: url("assets/fonts/arial.ttf");
                font-family: "ArialCFF";
                embedAsCFF: true;
            }
        </fx:Style>
     
        <fx:Script><![CDATA[
            private function listFonts():void {
                var fontArray:Array = Font.enumerateFonts(true);
                ta1.text += "Fonts: n";
                for(var i:int = 0; i < fontArray.length; i++) {
                    var thisFont:Font = fontArray[i];
                    ta1.text += "FONT " + i + ":: name: " + thisFont.fontName + "; typeface: " +
                    thisFont.fontStyle + "; type: " + thisFont.fontType;
                    if (thisFont.fontType == "embeddedCFF"||thisFont.fontType == "embedded") {
                        ta1.text += "*";
                    }
                    ta1.text += "n";
                }
            }
        ]]></fx:Script>
     
        <s:VGroup>
            <s:RichText text="Plain Label" styleName="myPlainStyle"/>
            <s:RichText text="Bold Label" styleName="myBoldStyle"/>
            <s:RichText text="Italic Label" styleName="myItalicStyle"/>
     
            <s:TextArea id="ta1" height="200" width="400"/>
            <s:RichText text="* Embedded" styleName="myItalicStyle"/>
     
            <s:Label id="lbl"
                    fontFamily="ArialCFF"
                    fontLookup="embeddedCFF"
                    fontSize="24"
                    fontWeight="normal"
                    text="The quick brown fox jumps over the lazy dog.{'n'}THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."
                    horizontalCenter="0" verticalCenter="0" />
        </s:VGroup>
     
    </s:WindowedApplication>
    1. My God – I found… I had the -managers flash.fonts.AFEFontManager option set!!! Sorry for the annoyance.. And thank you for your help.
      Best regards,

  11. Hey Peter

    Thanks for all your posts on Embedding Fonts. I’m trying to convert a Flash project to a Flex project. I’m having real problems trying to Embed Fonts into the Flex Project. I’ve followed all the examples on your site and I’ve had no success.

    I have attached 2 code examples below.

    In the first example I’m simply drawing a red rectangle on the stage and trying to place some text on the rectangle. I’ve used the “Embed” approach outlined in your example with no success.

    The relevant lines of code are:

    22 – [Embed(source=”font/arial.ttf”, fontFamily=”ArialEmbedded”, ….
    41 – var myFormat:TextFormat = new TextFormat();
    42 – myFormat.font= “ArialEmbedded”;

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/halo"
            minWidth="1024" minHeight="768"
            creationComplete="init()">
     
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
     
        <fx:Script>
            <![CDATA[
                import flash.text.*;
                import flash.text.Font;
     
                public var boxHolder:MovieClip;
                public var textHolder:MovieClip;
     
                public var textTitle:MovieClip;
     
                [Embed(source="font/arial.ttf",
                        fontFamily="ArialEmbedded",
                        mimeType="application/x-font",
                        embedAsCFF="true")]
                private const ArialEmbeddedFont:Class;
     
                public function init():void {
                    boxHolder=new MovieClip();
                    systemManager.stage.addChild(boxHolder);
     
                    boxHolder.graphics.beginFill(0×990000);
                    boxHolder.graphics.drawRoundRect(50, 30, 100, 60,10);
     
                    textHolder=new MovieClip();
                    systemManager.stage.addChild(textHolder);
     
                    textTitle=new MovieClip();
     
                    //var myFont:Font = new Font();
                    var myFormat:TextFormat = new TextFormat();
                    myFormat.font= "ArialEmbedded"; //myFont.fontName;
                    myFormat.size=12;
                    myFormat.color=0×000000;
                    myFormat.align="left";
     
                    var myTextField:TextField = new TextField();
                    myTextField.width=80;
                    myTextField.wordWrap=true;
                    myTextField.defaultTextFormat=myFormat;
                    myTextField.embedFonts=true;
                    myTextField.multiline=true;
                    myTextField.htmlText="Hello World";
                    myTextField.selectable=false;
                    myTextField.background=false;
                    myTextField.border=false;
                    myTextField.antiAliasType = AntiAliasType.ADVANCED;
                    myTextField.autoSize=TextFieldAutoSize.LEFT;
     
                    textTitle.addChild(myTextField);
     
                    textHolder.addChild(textTitle);
                    textTitle.x=40;
                    textTitle.y=20;
                }
     
            ]]>
        </fx:Script>
     
    </s:Application>

    I’ve also tried the following:

    File name: Arial_Black.as

    package
    {
    	import flash.text.Font; 
     
    	[Embed(source = 'font/arial.ttf', fontName='ArialBlack' )]
    	public class Arial_Black extends Font {
     
    	}
    }

    I then update my main,mxml with the following:

    import Arial_Black;

    40 – var myFont:Font = new Arial_Black();
    41 – var myFormat:TextFormat = new TextFormat();
    42 – myFormat.font= myFont.fontName;

    It makes no difference if I register the font using Font.registerFont(Arial_Black);

    The one thing I haven’t tried is creating a simple SWF from a Flash project which contains the Font I am after and then trying to load the SWF in my Flex project and Embedding the Font that way. This seems like over kill and I can’t understand why the above approach won’t work.

    I’ve also tried using Embed with systemFont, but I get compilation errors.

    Apologies if this is not the correct blog for posting this question; I posted it hear as I am trying to Embed a Font in Flex 4.

    Any pointers or help would be appreciated.

    Cheers.

  12. Hi Peter

    You may want to remove my previous post, as I think I’ve found a point of difference between Flex and Flash which results in the Embedded Font not appearing.

    In brief the issue appears to be the way I stack “MovieClips”. This works fine in Flash: stacking a MovieClip which contains a TextField onto top of a MovieClip which contains a graphic, the TextField appears. When I try this in Flex the TextField does not appear. I orginally thought this is because the TextField\TextFormat was not picking up the Embedded Font, however it appears as if it is not possible to stack MovieClips in Flex the same way you can in Flash.

    I’ve re-written the Flash app using “Group” in place of MovieClip and TextArea (with styles) in place of TextField and TextFormat. This works and means I do not need to embed Fonts.

    In case you feel it is worthwhile keeping my original post, I have re-written my example below.

    To summarise the differences:
    1 – No longer adding components to the “stage”, now using a UIComponent.
    2 – MovieClip is replaced by Group
    3 – TextField and TextFormat replaced by TextArea and setStyle
    4 – No longer need to embed a Font for use in AS.

    I’ve kept the original code in the example below, which has been commented out to highlight the differences:

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/halo"
            minWidth="1024" minHeight="768"
            creationComplete="init()">
     
        <fx:Script>
            <![CDATA[
                // import flash.text.*;
                // import flash.text.Font;
     
                import spark.components.TextArea;
                import spark.components.Group;
     
                //public var boxHolder:MovieClip;
                //public var textHolder:MovieClip;
     
                public var boxHolder:Group;
                public var textHolder:Group;
     
                //public var textTitle:MovieClip;
                public var textTitle:TextArea;
     
                /*
                    [Embed(source="font/arial.ttf",
                            fontFamily="ArialEmbedded",
                            mimeType="application/x-font",
                            embedAsCFF="true")]
                    private const ArialEmbeddedFont:Class;
                */
     
                public function init():void {
                    //boxHolder=new MovieClip();
                    boxHolder=new Group();
                    //systemManager.stage.addChild(boxHolder);
                    uiStage.addChild(boxHolder);
     
                    boxHolder.x = 50;
                    boxHolder.y = 30;
                    boxHolder.width = 100;
                    boxHolder.height = 60;
                    boxHolder.graphics.beginFill(0×990000);
                    boxHolder.graphics.drawRoundRect(0, 0, 100, 60,10);
     
                    //textHolder=new MovieClip();
                    //systemManager.stage.addChild(textHolder);
     
                    //textTitle=new MovieClip();
                    textTitle=new TextArea();
     
                    /*
                        //var myFont:Font = new Font();
                        var myFormat:TextFormat = new TextFormat();
                        myFormat.font= "ArialEmbedded"; //myFont.fontName;
                        myFormat.size=12;
                        myFormat.color=0×000000;
                        myFormat.align="left";
     
                        var myTextField:TextField = new TextField();
                        myTextField.width=80;
                        myTextField.wordWrap=true;
                        myTextField.defaultTextFormat=myFormat;
                        myTextField.embedFonts=true;
                        myTextField.multiline=true;
                        myTextField.htmlText="Hello World";
                        myTextField.selectable=false;
                        myTextField.background=false;
                        myTextField.border=false;
                        myTextField.antiAliasType = AntiAliasType.ADVANCED;
                        myTextField.autoSize=TextFieldAutoSize.LEFT;
     
                        textTitle.addChild(myTextField);
     
                        textHolder.addChild(textTitle);
                        textTitle.x=40;
                        textTitle.y=20;
                    */
     
                    textTitle.width = 80;
                    textTitle.height = 20;
                    textTitle.visible = true;
                    textTitle.text = "Hello World";
                    textTitle.editable = false;
                    textTitle.setStyle("contentBackgroundColor", 0xFFFFFF);
                    textTitle.setStyle("contentBackgroundAlpha", 0);
                    textTitle.setStyle("borderThickness", 0);
                    textTitle.setStyle("borderAlpha", 0);
                    textTitle.setStyle("fontSize", 12);
                    textTitle.setStyle("fontFamily", "Arial");
                    textTitle.setStyle("fontStyle", "normal");
                    textTitle.setStyle("fontWeight", "normal");
                    textTitle.setStyle("textAlign", "left");
                    textTitle.setStyle("color", 0xFFFFFF);
                    textTitle.buttonMode = false;
                    textTitle.focusEnabled = false;
                    textTitle.selectable = false;
                    textTitle.x=0;
                    textTitle.y=0;
     
                    boxHolder.addElement(textTitle);
     
                }
            ]]>
        </fx:Script>
     
        <mx:UIComponent width="100%" height="100%" id="uiStage" x="0" y="0"/>
     
    </s:Application>

    As I will be continuing to convert a large number of projects from Flash to Flex, it might be worthwhile putting together a new blog for this. I would be happy to contribute and provide examples.

    If anyone has any sugestions or tips for Flash to Flex conversions, it would be great to hear from you.

    Cheers

    1. @Parmy,

      Sure, your revised example is better since it doesn’t try and use systemManager.stage.addChild(), but it doesn’t really solve the problem of not being able to use an embedded font with a TextField. The one important thing to note is that there are two ways of font embedding now with Flex 4 and Flash Player 10. Previously you would embed a font and it would always use the flash.text.TextField class and use a DefineFont3 font behind the scenes. Now with the new Flash Text Engine/FTE (flash.text.engine.*) classes and Text Layout Framework/TLF (flashx.textLayout.*) classes, you can also embed fonts as DefineFont4 by setting the embedAsCFF property to true (which is now the default value in the latest beta Flex 4 SDK builds).
      So the important thing to remember is that if you want to use embedded fonts, if you’re using the “older” TextField based Flex components (mx.*) — or are using the TextField class directly , you need to set the embedAsCFF property to false when embedding your fonts. If you are using the newer FTE or TLF based Flex components (spark.*), you need to set the embedAsCFF property to true when embedding your fonts.

      Here’s a slightly modified version of your first example which uses an embedded font with a classic flash.text.TextField object:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                     initialize="init();">
       
          <fx:Script>
              <![CDATA[
                  public var boxHolder:MovieClip;
                  public var textHolder:MovieClip;
                  public var textTitle:MovieClip;
       
                  [Embed(source="C:/Windows/fonts/arial.ttf",
                          fontFamily="ArialEmbedded",
                          mimeType="application/x-font",
                          embedAsCFF="false")]
                  private const ArialEmbeddedFont:Class;
       
                  public function init():void {
                      boxHolder = new MovieClip();
                      boxHolder.graphics.beginFill(0x990000);
                      boxHolder.graphics.drawRoundRect(50, 30, 100, 60, 10);
                      uic.addChild(boxHolder);
       
                      var myFont:Font = new ArialEmbeddedFont();
       
                      var myFormat:TextFormat = new TextFormat();
                      myFormat.font = myFont.fontName;
                      myFormat.size = 12;
                      myFormat.color = 0x000000; // black
                      myFormat.align = TextFormatAlign.LEFT;
       
                      var myTextField:TextField = new TextField();
                      myTextField.width = 80;
                      myTextField.wordWrap = true;
                      myTextField.defaultTextFormat = myFormat;
                      myTextField.embedFonts = true;
                      myTextField.multiline = true;
                      myTextField.htmlText = "Hello World";
                      myTextField.selectable = false;
                      myTextField.background = false;
                      myTextField.border = false;
                      myTextField.antiAliasType = AntiAliasType.ADVANCED;
                      myTextField.autoSize = TextFieldAutoSize.LEFT;
       
                      textTitle = new MovieClip();
                      textTitle.x = 40;
                      textTitle.y = 20;
                      textTitle.addChild(myTextField);
       
                      textHolder = new MovieClip();
                      textHolder.addChild(textTitle);
                      uic.addChild(textHolder);
                  }
              ]]>
          </fx:Script>
       
          <mx:UIComponent id="uic" />
       
      </s:Application>

      Peter

  13. Hi Peter

    Thanks a lot for your response.

    My apologies for my misleading post and my guesses at what the problem were; I’ll be more careful in future :-)

    I had to make one slight mod, to the code you listed to make it compile/work:

    Line 4:

    xmlns:mx=”library://ns.adobe.com/flex/mx”

    I changed to:

    xmlns:mx=”library://ns.adobe.com/flex/halo”

    If you could help me with the following questions, I’d appreciate the help:

    1 – What if any would be the advantage of using the new spark components (for instance TextArea) over the older TextField? From what I can see, the new FTE and TLF provide lower level support; however, more code effort is required. From a TextField, I’m able to set background color/alpha/border etc… With TextArea I either have to use setStyle or TextAreaSkin etc… I do understand that there are a number of improvements for sparks* TextArea over mx* TextArea.

    2 – In the example I provided, I was able to use the new sparks* TextArea without embedding a font. I guess the obvious reason for embedding a font is it ensures the final swf app has access to the required font?

    Thanks again for your help and support.

    Cheers

    1. @Parmy,

      Ah yes, if you’re using the ns.adobe.com/flex/halo namespace you’re using an old Flex 4 beta SDK and your code will need to be changed when you upgrade to a newer nightly build of the Flex 4 SDK.
      The new Spark TextArea is built upon TLF (Text Layout Framework) which is built upon FTE (Flash Text Engine), and includes better bi-directional text support, ligatures, subscript/superscript, strikethrough, and all around better looking text.

      Yes, you can use the classic TextField, MX TextArea, or Spark TextArea without embedding a font. Also, all work with embedded fonts. All just depends on whether you want to rotate the text, or change the alpha, or if you want to ensure that the Flash/Flex application will work on a user’s computer if they do not have the specific font installed on their machine.

      Peter

  14. Congratulations to the Adobe Development team for continuing to make Font Embedding the most annoying and frustrating aspect of Flash/Flex development. There has to be an easier and more intuitive way.

    1. @ Annoyed :I agree it is rubbish that they have always made font embedding difficult for many years now and again this evening I struggle to get my font embeded in a component.
      @everyone :This example is working in MAIN but not for other rich text instances throughout !

  15. Here is a script to check if your font was embedded. You add a click handler to the Label/ RichText/ etc component. What made all the difference was adding the line fontLookup=”embeddedCFF” to the component. A lot of examples I either glazed over this property or they didn’t require it in earlier builds.

    http://pastebin.com/3jmqifnK

    [Bindable]
    public var details:String;
     
    protected function getTextDetails(event:MouseEvent):void {
     
    	// will return device, embedded or embeddedCFF
    	var fontLookup:String = Object(event.currentTarget).textFlow.computedFormat.fontLookup; 
    	var fontFamily:String = Object(event.currentTarget).textFlow.computedFormat.fontFamily;
    	var renderingMode:String = Object(event.currentTarget).textFlow.computedFormat.renderingMode;
    	var details:String = "Font: "+fontFamily+", Font Lookup: "+fontLookup + ", Rendering Mode: "+renderingMode;
    }
  16. I have the same problem :

    warning: incompatible embedded font ‘Lucida Grande’ specified for spark.components::RichText (myTargetText) . This component requires that the embedded font be declared with embedAsCff=true.

    as I embbed a swf file in my css with the param embedAsCff set to true :
    [code]@font-face {
    src: url(“lucidaFont.swf”);
    fontWeight: normal;
    font-family: “Lucida Grande”;
    embed-as-cff:true;
    embedAsCff:true;
    }

    s|RichText{
    font-size:12;
    rendering-mode:cff;
    font-lookup: embeddedCFF;
    font-family:”Lucida Grande”;
    font-weight:normal;
    color:#000000;
    text-align: start;
    direction: ltr;
    }

    [/code]

    I think the problem comes from the swf embedded font cause when I use the “Lucida Grande.dfont” it is working fine… I tried compiling it in CS4, CS5 (with export in actionScript set to TLF), without success..
    But I need to use the swf, so I have to find a way to embedded the font as cff in Flash. Stuck since 2 days on the problem … Help !!! (Peter the master :D)

  17. Thanks Peter for the answer, the problem is that I need to pass through the Flash in order to add some specific characters not handled by the default font :(

    Anyway, I tried ambedding teh font from the actionscript, and I still get the same error : “transcoding parameter is not supported by flex2.compiler.media.FontTranscoder” as I tried to import the dfont, even though I m with an sdk4 and even if I create a project appart… aaaaah :(

Comments are closed.