Embedding fonts in Flex 4

by Peter deHaan on October 15, 2008

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?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/.

Tagged as: cff, embedAsCFF, Gumbo, mimeType, needsSWF

{ 26 comments… read them below or add one }

1 Johannes 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

2 Troy Blank 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!

3 Kirill Mazin 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!

4 peterd 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

5 Troy Blank 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.

6 Troy Blank 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/

7 Gus Leo 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.

8 Peter deHaan 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

9 Jean-Marie 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

10 Peter deHaan 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

11 Jean-Marie 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

12 Jean-Marie 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
13 Peter deHaan 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

14 Jean-Marie 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…

15 Peter deHaan 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

16 Anonymous 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…

17 Jean-Marie 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*

18 Jean-Marie 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>

19 Jean-Marie 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

20 Parmy 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.

21 Parmy 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

22 Peter deHaan 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

23 Parmy 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

24 Peter deHaan 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

25 pc.de free fonts January 11, 2010 at 8:02 am

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

26 Annoyed 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.

Embedding fonts in Flex 4

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Embedding fonts in Flex 4

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising