Comments on: Embedding fonts in Flex 4 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ Just a bunch of Adobe Flex Examples Fri, 19 Mar 2010 20:35:16 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Annoyed http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6839 Annoyed Mon, 25 Jan 2010 06:56:33 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6839 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. 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.

]]> By: pc.de free fonts http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6754 pc.de free fonts Mon, 11 Jan 2010 16:02:51 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6754 I will try it in evening.Thanks for good example,well,nice share. I will try it in evening.Thanks for good example,well,nice share.

]]> By: Peter deHaan http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6719 Peter deHaan Sun, 03 Jan 2010 20:32:12 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6719 @Parmy, Ah yes, if you're using the <em>ns.adobe.com/flex/halo</em> 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 @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

]]> By: Parmy http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6718 Parmy Sun, 03 Jan 2010 19:49:19 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6718 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 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

]]> By: Peter deHaan http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6708 Peter deHaan Wed, 30 Dec 2009 19:55:24 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6708 @Parmy, Sure, your revised example is better since it doesn't try and use <code>systemManager.stage.addChild()</code>, 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 <code>embedAsCFF</code> property to <code>true</code> (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 <code>embedAsCFF</code> property to <code>false</code> when embedding your fonts. If you are using the newer FTE or TLF based Flex components (spark.*), you need to set the <code>embedAsCFF</code> property to <code>true</code> 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: <pre lang="mxml"> <?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> </pre> Peter @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

]]> By: Parmy http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6705 Parmy Wed, 30 Dec 2009 18:16:57 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6705 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: <pre lang="mxml"> <?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> </pre> 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 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

]]> By: Parmy http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6701 Parmy Tue, 29 Dec 2009 16:55:55 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6701 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"; <pre lang="mxml"> <?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> </pre> I've also tried the following: File name: Arial_Black.as <pre lang="actionscript3"> package { import flash.text.Font; [Embed(source = 'font/arial.ttf', fontName='ArialBlack' )] public class Arial_Black extends Font { } } </pre> I then update my main,mxml with the following: <pre lang="actionscript3"> import Arial_Black; </pre> 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 <code>Font.registerFont(Arial_Black);</code> 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. 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.

]]> By: Jean-Marie http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6698 Jean-Marie Mon, 28 Dec 2009 19:17:56 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6698 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, 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,

]]> By: Jean-Marie http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6697 Jean-Marie Mon, 28 Dec 2009 19:13:43 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6697 Sorry, my previous code excerpt was truncated (I did not read the red warning -- too large font :-). Here it is again: <pre lang="mxml"> <?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> </pre> 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>
]]> By: Jean-Marie http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/comment-page-1/#comment-6696 Jean-Marie Mon, 28 Dec 2009 19:11:49 +0000 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comment-6696 CFF embedding does not seem to be working in my case. I did the following test: <code> @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 </code> I get the following result: <code> 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* </code> 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*

]]>