Using multiple typefaces -- Flex 2.01

Most fonts have four typeface styles: plain, boldface, italic, and bold-italic. You can embed any number of typeface styles in your Flex applications. If you only embed the boldface typeface in your application, you cannot use the normal (or plain) typeface unless you also embed that typeface. For each typeface that you use, you must add a new @font-face declaration to your style sheet.

Some Flex controls, such as Button, use the boldface typeface style by default, rather than the plain style. If you use an embedded font for a Button label, you must embed the boldface font style for that font.

The following example embeds the boldface, oblique, and plain typefaces of the Myriad Web Pro font. After you define the font face, you define selectors for the font by using the same alias as the fontFamily. You define one for the boldface, one for the oblique, and one for the plain face. To apply the font styles, this example applies the class selectors to the Label controls inline:

<?xml version="1.0"?>
<!-- fonts/MultipleFaces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFont;
        flashType: 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;
        flashType: 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;
        flashType: true;
     }
     
     .myPlainStyle {
        fontSize: 32;
        fontFamily: myFont;
     }
     
     .myBoldStyle {
        fontSize: 32;
        fontFamily: myFont;
        fontWeight: bold;
     }

     .myItalicStyle {
        fontSize: 32;
        fontFamily: myFont;
        fontStyle: italic;
     }
  </mx:Style>

  <mx:VBox> 
     <mx:Label text="Plain Label" styleName="myPlainStyle"/> 
     <mx:Label text="Italic Label" styleName="myItalicStyle"/> 
     <mx:Label text="Bold Label" styleName="myBoldStyle"/> 
  </mx:VBox>

</mx:Application>

Optionally, you can apply the boldface or oblique type to controls inline, as the following example shows:

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

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

     @font-face {
        src:url("../assets/MyriadWebPro-Italic.ttf");
        fontFamily: myFont;
        fontStyle: italic;
        flashType: true;
     }
     
     .myStyle1 {
        fontSize: 32;
        fontFamily: myFont;
     }
  </mx:Style>

  <mx:VBox styleName="myStyle1"> 
     <mx:Label text="Plain Label"/> 
     <mx:Label text="Italic Label" fontStyle="italic"/> 
     <mx:Label text="Bold Label" fontWeight="bold"/> 
  </mx:VBox>

</mx:Application>

If you embed a system font by name rather than by a font file by location, you use the font's family name (such as Myriad Web Pro) in the @font-face rule and not the typeface name (such as MyriadWebPro-Bold). The following example embeds a plain typeface and an italic typeface by using the system font names:

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceCSSByName.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:local("Myriad Web Pro");
        fontFamily: myPlainFont;
        flashType: true;
     }

     @font-face {
        src:local("Myriad Web Pro");
        fontFamily: myItalicFont;
        fontStyle: italic;
        flashType: true;
     }
  
     .mystyle1 {
        fontFamily:myPlainFont;
        fontSize: 32pt;
     }
     .mystyle2 {
        fontFamily:myItalicFont;
        fontSize: 32pt;
        fontStyle: italic;
     }
  </mx:Style>
  
  <mx:Panel title="Embedded Fonts Using CSS">
     <mx:VBox>
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle1" 
            text="The text uses the plain typeface." 
            rotation="15"
        />
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle2" 
            text="The text uses the italic typeface." 
            rotation="15"
        />
     </mx:VBox>
  </mx:Panel>
</mx:Application>

Flex also supports using the <b> and <i> HTML tags in text-based controls, such as Label, to apply the boldface or italic font to the text.

If you use a bold-italic font, the font must have a separate typeface for that font. You specify both descriptors (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;
    flashType: true;
}
.myBoldItalicStyle {
    fontFamily:myFont;
    fontWeight:bold;
    fontStyle:italic;
    fontSize: 32;
}

In the @font-face definition, you can specify whether the font is boldface or italic font by using the fontWeight and fontStyle descriptors. 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.

You can also add any other descriptors 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.