Embedding fonts in Flex 4

31 Responses to Embedding fonts in Flex 4

1. Johannes says:

   October 28, 2008 at 3:11 am

   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

   Reply
2. Troy Blank says:

   November 17, 2008 at 8:33 am

   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!

   Reply
3. Kirill Mazin says:

   November 19, 2008 at 9:12 pm

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

   Reply
4. peterd says:

   November 20, 2008 at 7:02 am

   Troy Blank/Kirill Mazin,

   I’m not sure if Flash CS4 supports CFF fonts. Support for CFF fonts was added to the Flex compiler and I don’t know if Flash supports them yet.

   You could try downloading the beta Flex Gumbo SDK and using something like this in Flash CS4, http://actionscriptexamples.com/2008/10/26/using-the-flex-sdk-with-flash-cs4/ and then just use the [Embed] metadata to embed the CFF font using code from above.

   Peter

   Reply
5. Troy Blank says:

   November 22, 2008 at 8:00 am

   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.

   Reply
6. Troy Blank says:

   November 25, 2008 at 12:00 pm

   thanks peterd, but it looks like adobe released something that does the same trick.

   just to let you guys know, in ordered to embed CFF fonts into flash cs4 you can use the adobe’s new text layout framework, i hope this saves as much time as i have lost trying to figure this out :)

   http://labs.adobe.com/technologies/textlayout/

   Reply
7. Gus Leo says:

   September 24, 2009 at 12:57 am

   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.

   Reply
   • Peter deHaan says:

     September 28, 2009 at 4:19 pm

     @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

     Reply
8. Jean-Marie says:

   December 22, 2009 at 11:19 am

   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

   Reply
   • Peter deHaan says:

     December 22, 2009 at 11:27 am

     @Jean-Marie,

     That beta SDK is pretty old. I’d download a newer, nightly build of the Flex 4 SDK from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 (currently the latest nightly version is 4.0.0.13099).

     Peter

     Reply
9. Jean-Marie says:

   December 23, 2009 at 2:47 am

   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

   Reply
   • Jean-Marie says:

     December 23, 2009 at 5:22 am

     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

     Reply
   • Peter deHaan says:

     December 23, 2009 at 8:15 am

     @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

     Reply
10. Jean-Marie says:

    December 28, 2009 at 5:46 am

    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…

    Reply
    • Peter deHaan says:

      December 28, 2009 at 6:50 am

      @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

      Reply
      • Anonymous says:

        December 28, 2009 at 10:06 am

        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…
11. Jean-Marie says:

    December 28, 2009 at 11:11 am

    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*


    Reply
12. Jean-Marie says:

    December 28, 2009 at 11:13 am

    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>

    Reply
    • Jean-Marie says:

      December 28, 2009 at 11:17 am

      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,

      Reply
13. Parmy says:

    December 29, 2009 at 8:55 am

    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.

    Reply
14. Parmy says:

    December 30, 2009 at 10:16 am

    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

    Reply
    • Peter deHaan says:

      December 30, 2009 at 11:55 am

      @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

      Reply
15. Parmy says:

    January 3, 2010 at 11:49 am

    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

    Reply
    • Peter deHaan says:

      January 3, 2010 at 12:32 pm

      @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

      Reply
16. pc.de free fonts says:

    January 11, 2010 at 8:02 am

    I will try it in evening.Thanks for good example,well,nice share.

    Reply
17. Annoyed says:

    January 24, 2010 at 10:56 pm

    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.

    Reply
    • calvin says:

      May 17, 2010 at 4:20 pm

      @ 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 !

      Reply
18. judah says:

    May 13, 2010 at 12:16 am

    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;
    }

    Reply
19. Gaelle says:

    December 7, 2010 at 6:41 am

    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)

    Reply
    • Peter deHaan says:

      December 7, 2010 at 9:34 am

      @Gaelle,

      Check out the fontswf utility instead of compiling w/ Flash CS4 or CS5; “Using the fontswf utility”.

      Peter

      Reply
20. Gaelle says:

    December 8, 2010 at 7:08 am

    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 :(

    Reply