Flex 2 Developer's Guide > Customizing the User Interface > Using Fonts > Using embedded fonts

Using embedded fonts

Rather than rely on a client machine to have the fonts you specify, you can embed TrueType font families in your Flex application. This means that the font is always available to Flash Player when running the application, 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 can be partially or fully transparent.
• Embedded fonts can be rotated.
• Embedded fonts provide smoother playback when zooming.
• Text appears exactly as you expect when using embedded fonts.
• When you embed a font, you can use the FlashType hinting information that provides clear, high-quality text rendering in SWF files. Using FlashType hinting greatly improves the readability of text, particularly when it is rendered at smaller font sizes. For more information about FlashType hinting, see Using FlashType hinting.

Using embedded fonts is not always the best solution, however. Embedded fonts have the following limitations and drawbacks:

• Embed only TrueType fonts. To embed other font types such as Type 1 PostScript fonts, embed that font in a SWF file that you create in Flash 8, 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 may look fuzzy or illegible at small sizes. To avoid this fuzziness, you can use FlashType hinting to render fonts in Flex applications. For more information, see Using FlashType hinting.

You typically use CSS syntax for embedding fonts in Flex applications. You use the @font-face "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 must specify the @font-face declaration for each face of the font for the same family that you use. The source can be a local JRE font or one that is accessible by using a file path. You use this font family name in your MXML code to refer to the embedded font.

If you attempt to embed a font that the Flex compiler cannot find, Flex throws an error and your application does not compile.

Subtopics

Embedded font syntax

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

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

The src property specifies how the compiler should look for the font, and the name of the font to look for. You can either load a font by its filename (by using src:url) or by its system font name (by using src:local). This property is required. For more information, see Locating embedded fonts.

The fontFamily property sets the alias for the font that you use to apply the font in style sheets. This property is required.

The fontStyle and fontWeight properties set the type face values for the font. These properties are optional. The default values are normal.

The flashType property determines whether to include the FlashType hinting information when embedding the font. This property is optional. The default value is true. You cannot use this option when embedding fonts from a SWF file (see Embedding fonts from SWF files). For more information on using FlashType hinting, see Using FlashType hinting.

The following example embeds the MyriadWebPro.ttf font file:

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

The following example embeds that same font, but by using its system font name:

@font-face {
    src:local("Myriad Web Pro");
    fontFamily: myFontFamily;
    flashType: true;
}

After you embed a font with an @font-face declaration, you can use the new fontFamily name, or alias, in a type or class selector. The following example uses the myFontFamily embedded fontFamily as a type selector for VBox controls:

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFace.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontFamily;
        flashType: true;
     }
     
     VBox {
        fontFamily: myFontFamily;
     }     
  </mx:Style>

  <mx:Panel title="Embedded Font Applied With Type Selector">
     <mx:VBox>
        <mx:Button label="Click Me"/>
        <mx:Label text="Label"/> 
        <mx:TextArea width="400" height="75" text="The text 
            uses the myClass class selector."
        />
     </mx:VBox>
  </mx:Panel>
</mx:Application>

You can also apply the embedded font inline, as the following example shows:

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontFamily;
        flashType: true;
     }
  </mx:Style>

  <mx:Panel title="Embedded Font Applied Inline">
     <mx:VBox fontFamily="myFontFamily">
        <mx:Button label="Click Me"/>
        <mx:Label text="Label"/> 
        <mx:TextArea width="400" height="75" text="This text 
            is in Myriad Web Pro."
        />
     </mx:VBox>
  </mx:Panel>
</mx:Application>

When you run this example, you might notice that the Button control's label does not appear. This is because the label of a Button control uses a bold typeface. However, the embedded font's typeface (MyriadWebPro) does not contain a definition for the bold typeface. You must also embed a font's bold typeface so that the label of a Button control is rendered with the correct font. For information on embedding bold typefaces, see Using multiple typefaces.

Flex 2.01