Note: You must surround device font names with quotation marks when defining them with style declarations. Flash Player supports three device fonts. The following table describes these fonts:

Font name

_sans _serif _typewriter
Description The _sans device font is a sans-serif typeface; for example, Helvetica or Arial. The _serif device font is a serif typeface; for example, Times Roman. The _typewriter device font is a monospace font; for example, Courier.

USING FLEX 4 4

Using device fonts does not affect the size of the SWF file because the fonts reside on the client. However, using device fonts can affect performance of the application because it requires that Flash Player interact with the local operating system. Also, if you use only device fonts, your selection is limited to three fonts.

Using embedded fonts

[Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] <asdoclink>asdoc_%Flex20%_mx.core.FontAsset Rather than rely on a client machine to have the fonts you specify, you can embed TrueType font (TTF) or OpenType font (OTF) families in your Flex application. This means that the font is always available to Flash Player when the application is running, and you do not have to consider the implications of a missing font. Embedded fonts have the following benefits:
Client environment does not need the font to be installed. Embedded fonts are anti-aliased, which means that their edges are smoothed for easier readability. This is especially apparent when the text size is large. Embedded fonts provide smoother playback when zooming. Text appears exactly as you expect when you use embedded fonts. When you embed a font, you can use the advanced anti-aliasing information that provides clear, high-quality text rendering in SWF files. Using advanced anti-aliasing greatly improves the readability of text, particularly when it is rendered at smaller font sizes. For more information about advanced anti-aliasing, see Using advanced antialiasing with non-CFF based fonts on page 9.

Using embedded fonts is not always the best solution, however. Embedded fonts have the following limitations and drawbacks:
Embed only TrueType or OpenType fonts. To embed other font types such as Type 1 PostScript fonts, embed that font in a SWF file that you create in Flash, and then embed that SWF file in your Flex application. For more information, see Embedding fonts from SWF files. Embedded fonts increase the file size of your application, because the document must contain font outlines for the text. This can result in longer download times for your users. Embedded fonts, in general, decrease the legibility of the text at sizes smaller than 10 points. All embedded fonts use anti-aliasing to render the font information on the client screen. As a result, fonts might appear fuzzy or illegible at small sizes. In some cases, the text that is rendered by embedded fonts can be truncated when they are used in visual components. In these cases, you might be required to change the padding properties of the component by using style properties or subclassing it. This only occurs with some fonts. If you use Halo controls in a Flex 4 application, you might have to add additional code to make the Halo control use the embedded font, or embed the font twice: once for the Halo control and once for the Spark control. For more information, see Embedding fonts with Halo components on page 24.
You typically use Cascading Style Sheets (CSS) syntax for embedding fonts in Flex applications. You use the @fontface at-rule declaration to specify the source of the embedded font and then define the name of the font by using the fontFamily property. You typically specify the @font-face declaration for each face of the font for the same family that you use (for example, plain, bold, and italic).

USING FLEX 4 5

You can also embed fonts in ActionScript by using the [Embed] metadata tag. As with the @font-face declaration, you must specify a separate [Embed] tag for each font face. Note: Check your font licenses before embedding any font files in your Flex applications. Fonts might have licensing restrictions that preclude them from being stored as vector information. If you attempt to embed a font that the Flex compiler cannot find, Flex throws an error and your application does not compile.

Embedded font syntax

[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] 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] ; [advancedAntiAliasing: true | false]; [embedAsCFF:true|false] ; }

Embedding fonts in ActionScript
[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] You can embed TrueType or OTF font files or system fonts by location or by name by using the [Embed] metadata tag in ActionScript. To embed a font by location, you use the source property in the [Embed] metadata tag. To embed a font by name, you use the systemFont property in the [Embed] metadata tag.

USING FLEX 4 8

The [Embed] metadata tag takes the same properties that you set as the @font-face rule. You separate them with commas. For the list of properties, see Embedded font syntax on page 5 The following examples embed fonts by location by using the [Embed] tag syntax:
<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/EmbeddedFontFaceActionScriptByLocation.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Style>.mystyle1 { fontFamily:myMyriadFont; fontSize: 32pt; }.mystyle2 { fontFamily:myBoldMyriadFont; fontSize: 32pt; fontWeight: bold; } </fx:Style> <fx:Script> /* * Embed a font by location. */ [Embed(source='./assets/MyriadWebPro.ttf', fontName='myMyriadFont', mimeType='application/x-font', cff='true' )] // You do not use this variable directly. It exists so that // the compiler will link in the font. private var font1:Class; /* * Embed a font with bold typeface by location. */ [Embed(source='./assets/MyriadWebPro-Bold.ttf', fontWeight='bold', fontName='myBoldMyriadFont', mimeType='application/x-font', advancedAntiAliasing='true', cff='true' )]

USING FLEX 4 9

private var font2:Class; </fx:Script> <s:Panel title="Embedded Fonts Using ActionScript"> <s:VGroup> <s:RichText width="100%" height="75" styleName="mystyle1" text="This text uses the MyriadWebPro font." /> <s:RichText width="100%" height="75" styleName="mystyle2" text="This text uses the MyriadWebPro-Bold font." /> </s:VGroup> </s:Panel> </s:Application>
You use the value of the fontName property that you set in the [Embed] tag as the alias (fontFamily) in your style definition. To embed a font with a different typeface (such as bold or italic), you specify the fontWeight or fontStyle properties in the [Embed] statement and in the style definition. For more information on embedding different typefaces, see Using multiple typefaces on page 15. You can specify a subset of the fonts character range by specifying the unicodeRange parameter in the [Embed] metadata tag or the @font-face declaration. Embedding a range of characters rather than using the default of all characters can reduce the size of the embedded font and, therefore, reduce the final output size of your SWF file. For more information, see Setting character ranges on page 19.

Using advanced anti-aliasing with non-CFF based fonts
[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] 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 antialiasing 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 Flex 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 FLEX 4 10

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 Flex 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. 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:

USING FLEX 4 13

tf1.font = "myPlainFont"; var tf2:TextFormat = new TextFormat(); tf2.font = "Arial"; b1 = FlexGlobals.topLevelApplication.systemManager. isFontFaceEmbedded(tf1); b2 = FlexGlobals.topLevelApplication.systemManager. isFontFaceEmbedded(tf2); } ]]></fx:Script> <mx:Form> <mx:FormItem label="isFontFaceEmbedded (myPlainFont):"> <mx:Label id="l1" text=" {b1}"/> </mx:FormItem> <mx:FormItem label="isFontFaceEmbedded (Arial):"> <mx:Label id="l2" text="{b2}"/> </mx:FormItem> </mx:Form> </s:Application>
In this example, the font identified by the myPlainFont family name is embedded, but the Arial font is not. You can use the Font classs enumerateFonts() method to output information about device or embedded fonts. The following example lists embedded fonts:
<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/EnumerateFonts.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" 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; advancedAntiAliasing: true; embedAsCFF: true; } @font-face { src:url("./assets/MyriadWebPro-Bold.ttf"); fontFamily: myFont; fontWeight: bold; advancedAntiAliasing: true; embedAsCFF: true; } @font-face { src:url("./assets/MyriadWebPro-Italic.ttf"); fontFamily: myFont; fontStyle: italic; advancedAntiAliasing: true;

USING FLEX 4 14

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>

<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/MultipleFaces.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Style> @font-face { src:url("./assets/MyriadWebPro.ttf"); fontFamily: myFont; advancedAntiAliasing: true; embedAsCFF: true; } @font-face { /* Note the different filename for boldface. */ src:url("./assets/MyriadWebPro-Bold.ttf"); fontFamily: myFont; /* Notice that this is the same alias. */ fontWeight: bold; advancedAntiAliasing: true; embedAsCFF: true; } @font-face { /* Note the different filename for italic face. */ src:url("./assets/MyriadWebPro-Italic.ttf"); fontFamily: myFont; /* Notice that this is the same alias. */ fontStyle: italic;

USING FLEX 4 16

advancedAntiAliasing: true; embedAsCFF: true; }.myPlainStyle { fontSize: 32; fontFamily: myFont; }.myBoldStyle { fontSize: 32; fontFamily: myFont; fontWeight: bold; }.myItalicStyle { fontSize: 32; fontFamily: myFont; fontStyle: italic; } </fx:Style> <s:VGroup> <s:Label text="Plain Text" styleName="myPlainStyle"/> <s:Label text="Italic Text" styleName="myItalicStyle"/> <s:Label text="Bold Text" styleName="myBoldStyle"/> </s:VGroup> </s:Application>
Optionally, you can apply the bold or italic type to controls inline, as the following example shows:
<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/MultipleFacesAppliedInline.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Style> @font-face { src:url("./assets/MyriadWebPro.ttf"); fontFamily: myFont; advancedAntiAliasing: true; embedAsCFF: true; } @font-face { src:url("./assets/MyriadWebPro-Bold.ttf"); fontFamily: myFont; fontWeight: bold; advancedAntiAliasing: true; embedAsCFF: true;

USING FLEX 4 17

} @font-face { src:url("./assets/MyriadWebPro-Italic.ttf"); fontFamily: myFont; fontStyle: italic; advancedAntiAliasing: true; embedAsCFF: true; }.myStyle1 { fontSize: 32; fontFamily: myFont; } </fx:Style> <s:VGroup styleName="myStyle1"> <s:Label text="Plain Text"/> <s:Label text="Italic Text" fontStyle="italic"/> <s:Label text="Bold Text" fontWeight="bold"/> </s:VGroup> </s:Application>
If you use a bold-italic font, the font must have a separate typeface for that font. You specify both properties (fontWeight and fontStyle) in the @font-face and selector blocks, as the following example shows:
@font-face { src:url("./assets/KNIZIA-BI.TTF"); fontStyle: italic; fontWeight: bold; fontFamily: myFont; embedAsCFF: true; }.myBoldItalicStyle { fontFamily:myFont; fontWeight:bold; fontStyle:italic; fontSize: 32; }
In the @font-face definition, you can specify whether the font is bold or italic by using the fontWeight and fontStyle properties. For a bold font, you can set fontWeight to bold or an integer greater than or equal to 700. You can specify the fontWeight as plain or normal for a nonboldface font. For an italic font, you can set fontStyle to italic or oblique. You can specify the fontStyle as plain or normal for a nonitalic face. If you do not specify a fontWeight or fontStyle, Flex assumes you embedded the plain or regular font face. Flex does not require that bold or italic styles require a bold or italic font to be embedded. You can embed any font and use it on a control that uses bold or italic. The results might be less desireable than if you embedded a font with a bold or italic font face, but the text still renders. You can also add any other properties for the embedded font, such as fontSize, to the selector, as you would with any class or type selector. By default, Flex includes the entire font definition for each embedded font in the application, so you should limit the number of fonts that you use to reduce the size of the application. You can limit the size of the font definition by defining the character range of the font. For more information, see Setting character ranges on page 19.

USING FLEX 4 18

About the font managers
[Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] Flex includes several font managers to handle embedded fonts. The font managers take embedded font definitions and draw each character in Flash Player. This process is known as transcoding. The font managers are Batik, JRE, AFE (Adobe Font Engine), and CFF, represented by the BatikFontManager, JREFontManager, AFEFontManager, and CFFFontManager classes, respectively. The Batik and JRE font managers can transcode non-CFF TrueType fonts. The AFE font manager adds support for non-CFF OpenType fonts. The CFF font manager can transcode TrueType and OpenType CFF fonts. The Batik font manager transcodes only TrueType URL fonts (embedded by using src:url). It does not transcode system fonts. If you specify the font location when you embed the font, the compiler will use the Batik font manager. In general, the Batik font manager provides smoother rendering and more accurate line metrics (which affect multiline text and line-length calculations) than the JRE font manager. The JRE font manager transcodes TrueType system fonts, but the quality of output is generally not as good as the Batik font manager. If you install the font on your system, the compiler will use the JRE font manager because the Batik font manager does not support system fonts. The AFE font manager is the only font manager that you can use to transcode OpenType fonts for non-CFF fonts. It can also transcode TrueType fonts, but the fonts can only be URL fonts, not system fonts. If you embed an OpenType font, the compiler will use the AFE font manager to transcode the font because the other font managers do not support OpenType fonts, unless that OpenType font is a system font, in which case, the compiler will throw an error. None of the font managers can transcode OpenType fonts that are embedded as system fonts. The CFF font manager supports both TrueType and OpenType fonts. It also supports URL and system fonts. Use this manager for all CFF fonts. The following table shows which fonts are supported by which font managers:

Setting ranges in font-face declarations
[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] You can set the range of allowable characters in an MXML file by using the unicodeRange property of the @fontface declaration. The following example embeds the Myriad Web Pro font and defines the range of characters for the
font in the <fx:Style> tag:

USING FLEX 4 20

<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/EmbeddedFontCharacterRange.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" 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; advancedAntiAliasing: true; 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 8 9. </s:text> </s:RichText> </s:Panel> </s:Application>
Setting ranges in flex-config.xml
[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] 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 an englishRange and an otherRange named ranges in the flex-config.xml file:

USING FLEX 4 21

<fonts> <languages> <language-range> <lang>englishRange</lang> <range>U+0020-007E</range> </language-range> <language-range> <lang>otherRange</lang> <range>U+00??</range> </language-range> <languages> </fonts>
In your MXML file, 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 Adobe LiveCycle Data Services ES, the file is located at flex_app_root/WEB-INF/flex/flashunicode-table.xml; for Adobe 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 Flex applications, copy the ranges from this file and add them to the flex-config.xml files.
Detecting available ranges
[Chunk: No] [Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] 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.

USING FLEX 4 22

<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- charts/CharacterRangeDetection.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="checkCharacterSupport();" > <s:layout> <s:VerticalLayout/> </s:layout> <fx:Style> @font-face { font-family: myABFont; advancedAntiAliasing: true; src:url("./assets/MyriadWebPro.ttf"); /* * Limit range to the letters A and B. */ unicodeRange: U+0041-0042; embedAsCFF: true; } @font-face { font-family: myWideRangeFont; advancedAntiAliasing: true; 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 +

USING FLEX 4 23

"' does not support these glyphs.\n"; } } } ]]></fx:Script> <s:VGroup> <s:RichText> <s:text> myABFont unicodeRange: U+0041-0042 (letters 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>

USING FLEX 4 25

<codeblock> Resolved code-reference. <?xml version="1.0"?> <!-- fonts/CFFTest.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" 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; advancedAntiAliasing: false; 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 Correct Fonts"> <s:VGroup> <s:Label text="Spark Label" styleName="myCFFStyle"/> <mx:Label text="Halo Label" styleName="myStyleNoCFF"/> </s:VGroup> </s:Panel> <s:Panel title="Using Incorrect Fonts"> <s:VGroup> <s:Label text="Spark Label" styleName="myCFFStyle"/> <!-- The label text will not show up because it's a Halo control that is attempting to use a Spark-compatible embedded font. --> <mx:Label text="Halo Label" styleName="myCFFStyle"/> </s:VGroup> </s:Panel> </s:Application>
As this example illustrates, if you mix Halo and Spark controls inside the same application, you might not be able to use the same embedded font. There are two possible remedies to this situation:
Specify that the Halo controls use FTE classes style to render text, rather than their default text renderers. Embed both the non-CFF version of the font in addition to the CFF version of the font.

USING FLEX 4 26

The following sections describe each of these solutions.

More Help topics

Halo text controls
Using FTE in Halo controls
[Output: IPH, Print, Web] [Revision Control: Changing] 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 Halo controls in the mx.controls package. The reason that Halo controls do not support FTE is that by default they use the UITextField subcomponent to render text. The UITextField 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.UITLFTextField and mx.controls.TLFTextInput classes that support FTE for Halo text controls. You can use these classes in some Halo 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 TLFTextInput and UITLFTextField classes with your Halo text controls is to apply the TLFText.css theme file to your application. This theme applies the TLFTextInput and UITLFTextField classes to your Halo controls. The TLFText.css theme file is a convenience theme that is set up to apply only FTE-supporting classes to Halo controls. The following excerpt from the TLFText.css theme file shows that the textInputClass and textFieldClass style properties are set to classes that support FTE:

USING FLEX 4 32

In many cases, you can resolve an error by changing the font manager. This is set in the flex-config.xml configuration file; for example:
<fonts> <managers> <manager-class>flash.fonts.JREFontManager</manager-class> <manager-class>flash.fonts.AFEFontManager</manager-class> <manager-class>flash.fonts.BatikFontManager</manager-class> </managers> </fonts>
You can try changing the order of font managers, as the following example shows:
<fonts> <managers> <manager-class>flash.fonts.AFEFontManager</manager-class> <manager-class>flash.fonts.BatikFontManager</manager-class> <manager-class>flash.fonts.JREFontManager</manager-class> </managers> </fonts>
Resolving compiler errors
[Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] 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
Solution Indicates that the font was not found by the compiler. Ensure that the path to the font is correct in the @font-face declaration or the [Embed] tag and that the path is accessible by the compiler. Indicates that the fontName property used in the [Embed] statement might not match the name of the font. For fonts in SWF files, ensure that the spelling and word spacing of the font name in the list of available fonts in Flash is the same as the fontName property in your [Embed] statement and the fontFamily property that you use in your style definitions. This error can also mean that the fonts style was not properly embedded in Flash. Open the FLA file and ensure that there is a text area with the font and style described, that the text is dynamic, and that you selected a character range for that text.
Resolving run-time errors
[Output: IPH, Print, Web] [EditorialStatus: Preliminary Review] To determine if your fonts are embedded properly, you can use the isFontFaceEmbedded() method of the SystemManager, as described in Detecting embedded fonts on page 11. 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 Halo Button controls text labels require the bold typeface. If you do not embed the bold typeface, the Halo Button control does not display the embedded font. In your Flex 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: false; }