To embed TrueType or OpenType fonts, you use the following syntax in your style sheet or <fx:Style> tag:

 @font-face { 
 	src: url("location"); 
 	fontFamily: alias; 
 	[fontStyle: normal | italic | oblique] ; 
 	[fontWeight: normal | bold | heavy] ; 
	[embedAsCFF:true | false] ; 
 	[advancedAntiAliasing: true | false]; 
 }

Example of @font-face rule

The following example embeds the MyriadWebPro.ttf font file:

 @font-face { 
 	src: url("../assets/MyriadWebPro.ttf"); 
 	fontFamily: myFontFamily; 
 	embedAsCFF: true; 
 }

After you embed a font with an @font-face declaration, you can use the value of the fontFamily property, or alias, in a selector's property declarations. The following example uses myFontFamily, the value of the fontFamily property, as the font in the VGroup type selector:

<?xml version="1.0"?> 
<!-- fonts/EmbeddedFontFace.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myFontFamily; 
        embedAsCFF: true; 
     } 
     
     s|VGroup { 
        fontFamily: myFontFamily; 
        fontSize: 15; 
     }     
  </fx:Style> 
 
  <s:Panel title="Embedded Font Applied With Type Selector"> 
     <s:VGroup> 
        <!-- This MX button tries to use a system font. --> 
        <mx:Button label="Click Me"/> 
 
        <!-- This Spark button uses the font of the VGroup container. --> 
        <s:Button label="Click Me"/> 
        <s:Label text="This is a Label control."/> 
        <s:RichText width="250"> 
            <s:text> 
                The text in this RichText control uses the 
                font set on the VGroup. 
            </s:text> 
        </s:RichText> 
     </s:VGroup> 
  </s:Panel> 
 
  <!-- This button uses the default font because it is not in the VGroup. --> 
  <s:Button label="Click Me"/> 
    
</s:Application>

Considerations when using the MX Button control

When you run this example, you might notice that the label on the MX Button (in the "mx" namespace) disappears. This is because the default style of an MX Button control's label uses a bold typeface. However, the embedded font's typeface (Myriad Web Pro) does not contain a definition for the bold typeface.

The Spark Button (in the "s" namespace) control's label renders with the embedded font because it does not require a bold faced font.

Apply embedded font inline

You can also apply the embedded font inline by specifying the alias as the value of the control's fontFamily property, as the following example shows:

<?xml version="1.0"?> 
<!-- fonts/EmbeddedFontFaceInline.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myFontFamily; 
        embedAsCFF: true; 
     } 
  </fx:Style> 
 
  <s:Panel title="Embedded Font Applied Inline"> 
     <s:VGroup fontFamily="myFontFamily"> 
        <s:Button label="Click Me"/> 
        <s:Label text="This is a Label."/> 
        <s:RichText width="200" fontFamily="myFontFamily"> 
            <s:text>The text in the RichText control is Myriad Web Pro.</s:text> 
        </s:RichText> 
     </s:VGroup> 
  </s:Panel> 
</s:Application>

Flex 3 components in the Halo theme use non-CFF fonts. The text in these components is rendered with the flash.text.TextField API (instead of the new Flash Text Engine (FTE).

When you embed non-CFF fonts (with the embedAsCFF property set to false), you can use advanced anti-aliasing to provide those fonts with additional information about the font. Non-CFF embedded fonts that use the advanced anti-aliasing information are typically clearer and appear sharper at smaller font sizes. CFF fonts have this information by default.

By default, non-CFF fonts that you embed in applications use the advanced anti-aliasing information. This default is set by the fonts.advanced-anti-aliasing compiler option in the flex-config.xml file (the default value is true). You can override this default value by setting the value in your style sheets or changing it in the configuration file. To disable advanced anti-aliasing in style sheets, you set the advancedAntiAliasing style property to false in your @font-face rule, as the following example shows:

 @font-face { 
 	src:url("../assets/MyriadWebPro.ttf"); 
 	fontFamily: myFontFamily; 
 	advancedAntiAliasing: false; 
	embedAsCFF: false; 
 }

Using advanced anti-aliasing can degrade the performance of your compiler. This is not a run-time concern, but can be noticeable if you compile your applications frequently or use the web-tier compiler. Using advanced anti-aliasing can also cause a slight delay when you load SWF files. You notice this delay especially if you are using several different character sets, so be aware of the number of fonts that you use. The presence of advanced anti-aliasing information may also cause an increase in the memory usage in Flash Player and Adobe^® AIR™. Using four or five fonts, for example, can increase memory usage by approximately 4 MB.

When you embed non-CFF fonts that use advanced anti-aliasing in your applications, the fonts function exactly as other embedded fonts. They are anti-aliased, you can rotate them, and you can make them partially or wholly transparent.

Font definitions that use advanced anti-aliasing support several additional styles properties: fontAntiAliasType, fontGridFitType, fontSharpness, and fontThickness. These properties are all inheriting styles, but they are applied on the component being styled. They are not relevant to the actual font embedding process (and thus must not be specified in the @font-face rule).

Because the advanced anti-aliasing-related style properties are CSS styles, you can use them in the same way that you use standard style properties, such as fontFamily and fontSize. For example, a text-based component could use subpixel-fitted advanced anti-aliasing of New Century 14 at sharpness 50 and thickness -35, while all Button controls could use pixel-fitted advanced anti-aliasing of Tahoma 10 at sharpness 0 and thickness 0. These styles apply to all the text in a TextField control; you cannot apply them to some characters and not others.

The default values for the advanced anti-aliasing styles properties are defined in the defaults.css file. If you replace this file or use another style sheet that overrides these properties, Flash Player and AIR use the standard font renderer to render the fonts that use advanced anti-aliasing. If you embed fonts that use advanced anti-aliasing, you must set the fontAntiAliasType property to advanced, or you lose the benefits of the advanced anti-aliasing information.

The following table describes these properties:

To use functionality similar to advanced anti-aliasing with CFF based fonts, you use the functionality of FTE that is built into Spark's text-based controls. For more information, see Formatting Data.

You can use the SystemManager class's isFontFaceEmbedded() method to determine whether the font is embedded or whether it has been registered globally with the register() method of the Font class. The isFontFaceEmbedded() method takes a single argument—the object that describes the font's TextFormat—and returns a Boolean value that indicates whether the font family you specify is embedded, as the following example shows:

<?xml version="1.0"?> 
<!-- fonts/DetectingEmbeddedFonts.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark" 
     creationComplete="determineIfFontFaceIsEmbedded()"> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
     
  <fx:Style> 
     @font-face { 
        src: url(../assets/MyriadWebPro.ttf); 
        fontFamily: myPlainFont; 
        embedAsCFF: true; 
     } 
     
     .myStyle1 { 
        fontFamily: myPlainFont; 
        fontSize:12pt 
     } 
  </fx:Style> 
  
  <fx:Script><![CDATA[ 
     import mx.managers.SystemManager; 
     import mx.core.FlexGlobals; 
     import flash.text.TextFormat; 
     
    [Bindable] 
     private var b1:Boolean; 
    [Bindable] 
     private var b2:Boolean; 
     
     public function determineIfFontFaceIsEmbedded():void { 
        var tf1:TextFormat = new TextFormat(); 
        tf1.font = "myPlainFont"; 
        
        var tf2:TextFormat = new TextFormat(); 
        tf2.font = "Open_Sans"; 
        
        b1 = FlexGlobals.topLevelApplication.systemManager. 
           isFontFaceEmbedded(tf1); 
        b2 = FlexGlobals.topLevelApplication.systemManager. 
           isFontFaceEmbedded(tf2); 
     } 
  ]]></fx:Script> 
 
  <s:Form> 
     <s:FormItem label="isFontFaceEmbedded (myPlainFont):"> 
        <s:Label id="l1" text=" {b1}"/> 
     </s:FormItem>         
     <s:FormItem label="isFontFaceEmbedded (Open_Sans):"> 
        <s:Label id="l2" text="{b2}"/> 
     </s:FormItem>         
  </s:Form>    
</s:Application>

In this example, the font identified by the myPlainFont family name is embedded, but the Open_Sans font is not.

You can use the Font class's enumerateFonts() method to output information about device or embedded fonts. The following example lists embedded fonts:

<?xml version="1.0"?> 
<!-- fonts/EnumerateFonts.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="listFonts()"> 
    
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myFont; 
        embedAsCFF: true; 
     } 
 
     @font-face { 
        src:url("../assets/MyriadWebPro-Bold.ttf"); 
        fontFamily: myFont; 
        fontWeight: bold; 
        embedAsCFF: true; 
     } 
 
     @font-face { 
        src:url("../assets/MyriadWebPro-Italic.ttf"); 
        fontFamily: myFont; 
        fontStyle: italic; 
        embedAsCFF: true; 
     } 
     
     .myPlainStyle { 
        fontSize: 20; 
        fontFamily: myFont; 
     } 
     
     .myBoldStyle { 
        fontSize: 20; 
        fontFamily: myFont; 
        fontWeight: bold; 
     } 
 
     .myItalicStyle { 
        fontSize: 20; 
        fontFamily: myFont; 
        fontStyle: italic; 
     } 
  </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:VGroup> 
</s:Application>

The following list shows the first few lines of sample output. This list will vary depending on the client's system.

FONT 0:: name: myFont; typeface: regular; type: embeddedCFF* 
FONT 1:: name: myFont; typeface: bold; type: embeddedCFF* 
FONT 2:: name: myFont; typeface: italic; type: embeddedCFF* 
FONT 3:: name: Marlett; typeface: regular; type: device 
FONT 4:: name: Open_Sans; typeface: regular; type: device 
FONT 5:: name: Open_Sans CE; typeface: regular; type: device

The enumerateFonts() method takes a single Boolean argument: enumerateDeviceFonts. The default value of the enumerateDeviceFonts property is false, which means it returns an Array of embedded fonts by default.

If you set the enumerateDeviceFonts argument to true, the enumerateFonts() method returns an array of available device fonts on the client system, but only if the client's mms.cfg file sets the DisableDeviceFontEnumeration property to 0, the default value. If you set the DisableDeviceFontEnumeration property to 1, Flash Player cannot list device fonts on a client computer unless you explicitly configure the client to allow it. For more information about configuring the client with the mms.cfg file, see the Flash Player documentation.

The fontswf utility is a simple command line tool that converts a single font face from a font file into a SWF file. This SWF file can be used as the source of an embedded font in your applications. Supported font file types are *.ttf, *.otf, *.ttc, and *.dfont.

The fontswf utility is for users of the Flex SDK that prefer only open-source technology. Because the font managers are not open-source, this utility can be used in their place so that you can embed fonts in your applications.

The fontswf utility is in the sdk_root/bin directory of the Flex SDK. If you do not have the fontswf utility in your bin directory, you must get a more recent version of the SDK.

fontswf [options] font_input_file

c:\flex\bin> fontswf -4 -u U+0020-007F -bold -o c:/temp/myboldfont.swf c:/assets/fonts/myboldfont.swf

You can set the range of embedded characters in an application by using the unicodeRange property of the @font-face declaration. The following example embeds the Myriad Web Pro font and defines the range of characters for the font in the <fx:Style> tag:

<?xml version="1.0"?> 
<!-- fonts/EmbeddedFontCharacterRange.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myFontFamily; 
        embedAsCFF: true; 
        unicodeRange: 
           U+0041-005A, /* Upper-Case [A..Z] */ 
           U+0061-007A, /* Lower-Case a-z */ 
           U+0030-0039, /* Numbers [0..9] */ 
           U+002E-002E; /* Period [.] */ 
     } 
 
     s|RichText { 
        fontFamily: myFontFamily; 
        fontSize: 32; 
     }     
  </fx:Style> 
 
  <s:Panel title="Embedded Font Character Range"> 
        <s:RichText width="400" height="150"> 
            <s:text>The Text Uses Only Some of Available Characters 0 1 2 3 4 5 6 7 8 9.</s:text> 
        </s:RichText> 
  </s:Panel> 
</s:Application>

You can specify the language and character range for embedded fonts in the flex-config.xml file by using the <language-range> child tag. This lets you define the range once and use it across multiple @font-face blocks.

The following example creates named ranges in the flex‑config.xml file:

 <fonts> 
 	<languages> 
 		<language-range> 
 			<lang>englishRange</lang> 
 			<range>U+0020-007E</range> 
 		</language-range> 
 		<language-range> 
 			<lang>lowerCaseEnglish</lang> 
 			<range>U+0061-007A</range> 
 		</language-range> 
 	<languages> 
 </fonts>

In your style sheet, you point to the defined ranges by using the unicodeRange property of the @font-face declaration, as the following example shows:

 @font-face { 
 	fontFamily: myPlainFont;  
 	src: url("../assets/MyriadWebPro.ttf"); 
 	unicodeRange: "englishRange";  
	embedAsCFF: true; 
 } 

Flex includes a file that lists convenient mappings of the Flash UnicodeTable.xml character ranges for use in the Flex configuration file. For the Flex SDK, the file is located at flex_install_dir/frameworks/flash-unicode-table.xml.

The following example shows the predefined range Latin 1:

 <language-range> 
 	<lang>Latin I</lang> 
 	<range>U+0020,U+00A1-00FF,U+2000-206F,U+20A0-20CF,U+2100-2183</range> 
 </language-range>

To make ranges listed in the flash-unicode-table.xml file available in your applications, copy the ranges from this file and add them to the flex-config.xml files.

You can use the Font class to detect the available characters in an embedded font. You do this with the hasGlyphs() method.

The following example embeds the same font twice, each time restricting the font to different character ranges. The first font includes support only for the letters A and B. The second font family includes all 128 glyphs in the Basic Latin block.

<?xml version="1.0"?> 
<!-- charts/CharacterRangeDetection.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="checkCharacterSupport();" 
> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Style> 
        @font-face { 
            font-family: myABFont; 
            src:url("../assets/MyriadWebPro.ttf"); 
            /* 
            * Limit range to the characters A and B. 
            */ 
            unicodeRange: U+0041-0042; 
            embedAsCFF: true; 
        } 
 
        @font-face { 
            font-family: myWideRangeFont; 
            src:url("../assets/MyriadWebPro.ttf"); 
            /* 
            * Set range to the 128 characters in 
            * the Basic Latin block. 
            */ 
            unicodeRange: U+0041-007F; 
            embedAsCFF: true; 
        } 
    </fx:Style> 
 
    <fx:Script><![CDATA[ 
        public function checkCharacterSupport():void { 
            var fontArray:Array = Font.enumerateFonts(false); 
            for(var i:int = 0; i < fontArray.length; i++) { 
                var thisFont:Font = fontArray[i]; 
                if (thisFont.hasGlyphs("DHARMA")) { 
                    ta1.text += "The font '" + thisFont.fontName + 
                        "' supports these glyphs.\n"; 
                } else { 
                    ta1.text += "The font '" + thisFont.fontName + 
                        "' does not support these glyphs.\n"; 
                } 
            } 
        } 
    ]]></fx:Script> 
 
    <s:VGroup> 
        <s:RichText> 
            <s:text>myABFont unicodeRange: U+0041-0042 (characters A and B)</s:text> 
        </s:RichText> 
        <s:RichText> 
            <s:text>myWideRangeFont unicodeRange: U+0041-007F (Basic Latin chars)</s:text> 
        </s:RichText> 
 
        <s:Label text="Glyphs: DHARMA"/> 
 
        <s:RichText id="ta1" height="150" width="300"/> 
    </s:VGroup> 
 
</s:Application>

The controls that support FTE include all Spark components in the spark.components.* package. This includes the Spark text controls such as Label, RichText, and RichEditableText. This also includes Spark versions of the TextInput and TextArea controls. This does not include MX controls in the mx.controls.* package.

The reason that MX controls do not support FTE is that in previous versions of Flex, they used the UITextField subcomponent to render text. This subcomponent does not support FTE. Spark controls, on the other hand, use FTE-compatible classes to render text.

The Flex SDK provides the mx.core.UIFTETextField and mx.controls.MXFTETextInput classes that support FTE for MX text controls. You can use these classes in some MX controls so that those controls can use CFF versions of embedded fonts. As a result, those controls can use the same embedded fonts that you also use with the Spark controls. You do this by setting the textFieldClass and textInputClass styles to use these classes.

The easiest way to use the MXFTETextInput and UIFTETextField classes with your MX text controls is to apply the MXFTEText.css theme file to your application. This theme causes your MX controls to use the MXFTETextInput and UIFTETextField classes for text rendering. The MXFTEText.css theme file is a convenience theme that is set up to apply only FTE-supporting classes to MX controls.

DateField { 
	textInputClass: ClassReference("mx.controls.MXFTETextInput"); 
} 
Label { 
	textFieldClass: ClassReference("mx.core.UIFTETextField"); 
}

On the command line, you specify the MXFTEText.css theme file by using the theme compiler option, as the following example shows:

mxmlc -theme+=frameworks/projects/spark/MXFTEText.css MyApp.mxml

Note that instead of setting theme=filename, this example uses theme+=filename. This is so that the MXFTEText.css file is used as a theme, in addition to the default themes, not as a replacement of the default themes.

<?xml version="1.0"?> 
<!-- fonts/UseTLFTextTheme.mxml --> 
<!-- Compile this example by setting theme=MXFTEText.css for a compiler argument. --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myCFFFont; 
        embedAsCFF: true; 
     } 
 
     .myCFFStyle { 
        fontSize: 32; 
        fontFamily: myCFFFont; 
     } 
  </fx:Style> 
 
  <s:Panel title="Spark and MX Buttons"> 
    <s:VGroup> 
        <s:Button label="Spark Button" styleName="myCFFStyle"/> 
        <mx:Button label="MX Button" styleName="myCFFStyle"/> 
    </s:VGroup> 
  </s:Panel> 
 
</s:Application>

defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.FTEDataGridItemRenderer");

Some controls are not affected by the MXFTEText.css theme. This is because some MX controls have Spark equivalents, such as Button or ComboBox. As a result, you should use the Spark version of the control instead of the MX version where possible.

<?xml version="1.0" encoding="utf-8"?> 
<!-- fonts/TextFieldClassExample.mxml --> 
<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"> 
 
    <s:layout> 
        <s:VerticalLayout 
            paddingLeft="20" paddingRight="20" 
            paddingTop="20" paddingBottom="20" /> 
    </s:layout> 
 
    <fx:Style> 
        @namespace mx "library://ns.adobe.com/flex/mx"; 
        @namespace s "library://ns.adobe.com/flex/spark"; 
 
        @font-face { 
            src:url("../assets/MyriadWebPro.ttf"); 
            fontFamily: cffFont; 
            embedAsCFF: true; 
        } 
 
        mx|Label{ 
            fontFamily: cffFont; 
            fontSize: 22; 
            textFieldClass:ClassReference("mx.core.UIFTETextField"); 
        } 
        s|Label{ 
            fontFamily: cffFont; 
            fontSize: 22; 
        } 
    </fx:Style> 
 
    <mx:Label text="Hello World 1234567890 [MX Label]" width="100%"/> 
    <s:Label text="Hello World 1234567890 [Spark Label]" width="100%"/> 
 
</s:Application> 

<mx:Label text="Hello World 1234567890 [Label]" width="100%" textFieldClass="mx.core.UIFTETextField"/>

Do not use the setStyle() method to specify the value of these style properties in ActionScript.

The UIFTETextField class does not support editing, scrolling, selection, linking, or rich text. As a result, you can only use this class on MX controls that do not use these features. The MXFTETextInput class can be edited and is selectable.

If you compile an application with the compatibility-version compiler option set to 3.0.0, then the non-CFF version of the font is embedded automatically.

<?xml version="1.0"?> 
<!-- fonts/EmbedBoth.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Style> 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myCFFFont; 
        embedAsCFF: true; 
     } 
 
     @font-face { 
        src:url("../assets/MyriadWebPro.ttf"); 
        fontFamily: myFontNoCFF; 
        advancedAntiAliasing: true; 
        embedAsCFF: false; 
     } 
     
     .myCFFStyle { 
        fontSize: 32; 
        fontFamily: myCFFFont; 
     } 
 
     .myStyleNoCFF { 
        fontSize: 32; 
        fontFamily: myFontNoCFF; 
     } 
  </fx:Style> 
 
  <s:Panel title="Using Two Different Embedded Fonts"> 
    <s:VGroup> 
        <s:Label text="Spark Label" 
            styleName="myCFFStyle"/> 
        <mx:Label text="MX Label" 
            styleName="myStyleNoCFF" selectable="true"/> 
    </s:VGroup> 
  </s:Panel> 
 
</s:Application>

Note that when embedding a non-CFF font, you have the option of specifying the advancedAntiAliasing property. With CFF fonts, this property is ignored. The advanced anti-aliasing functionality is provided natively with FTE.

The following table describes common compiler errors and their solutions:

Unable to resolve 'swf_file_name' for transcoding

Font 'font_name' with style_description not found

To determine if your fonts are embedded properly, you can use the isFontFaceEmbedded() method of the SystemManager, as described in Detecting embedded fonts.

If you are using fonts embedded for Spark controls with MX controls, you should refer to Embedding fonts with MX components.

To properly embed your fonts, try the following techniques:

• If one type of control is not correctly displaying its text, ensure that you are embedding the appropriate typeface. For example, the MX Button control's text labels require the bold typeface. If you do not embed the bold typeface, the MX Button control does not display the label's text.

• In your application, ensure that you set all properties for each font typeface in the @font-face declaration or [Embed] statement. To embed a bold typeface, you must set the fontWeight property to bold, as the following example shows:

   @font-face { 
   	src: url(../assets/MyriadWebProEmbed.ttf); 
   	fontFamily: "Myriad Web Pro"; 
   	fontWeight: bold; 
  	embedAsCFF: true; 
   }

  You also must set the fontWeight style property in your style definition:

   .myStyle2 { 
   	fontFamily: "Myriad Web Pro"; 
   	fontWeight: bold;  
   	fontSize: 12pt; 
   }

  If you use the [Embed] statement, you must set the fontWeight property to bold as the following example shows:

   [Embed(source="MyriadWebProEmbed.ttf", fontName="Myriad Web Pro",fontWeight="bold")]

• For fonts that are embedded in SWF files that you import, open the FLA file in Flash and ensure that all of the typefaces were added properly. Select each text area and do the following:

  • Check that the font name is correct. Ensure that the spelling and word spacing of the font name in the list of available fonts in Flash is the same as the fontFamily property in the @font-face declaration or the fontName property in your [Embed] statement. This value must also match the fontFamily property that you use in your style definitions.

    If you did not select an anti-aliasing option for the font in Flash 8 (for example, you chose Bitmap Text (no anti-alias)), you might need to change the value of the font name to a format that matches fontName_fontSizept_st (for example, "Wingdings_8pt_st"). In the CSS for that bitmap font, be sure to set fontAntiAliasType to normal.

    To determine the exact font name exported by Flash (which you must match as the value of the fontFamily property in your application), open the SWF file in Flash and select Debug > Variables.

  • Check that the style is properly applied. For example, select the bold text area and check that the typeface really is bold.

  • Click the Embed button and ensure that the range of embedded characters includes the characters that you use in your application.

  • Check that each text area is set to Dynamic Text and not Static Text or Input Text. The type of text is indicated by the first drop-down box in the text's Properties tab.

  • Unless the SWF file was compiled with CFF, you must set the value of the embedAsCFF property to false for the imported font.

• For fonts in SWF files, ensure that you are using the latest SWF file that contains your fonts and was generated in Flash. Regenerate the SWF file in Flash if necessary.

• Ensure that the value of the embedAsCFF property is correct for the way that you are using a font. For Spark controls, set embedAsCFF to true. For fonts that are used by MX controls, try setting embedAsCFF to false. The following example sets the embedAsCFF property to false in the @font-face declaration:

  @font-face {  
  	src: url(../assets/MyriadWebProEmbed.ttf); 
  	fontFamily: "Myriad Web Pro";  
  	fontWeight: bold; 
  	embedAsCFF: false; 
  }