When you compile a Flex application, the application stores the names of the fonts that you used to create the text. Adobe® Flash® Player 9 uses the font names to locate identical or similar fonts on the user's system when the Flex application runs. You can also embed fonts in the Flex application so that the exact font is used, regardless of whether the client's system has that font.

You define the font that appears in each of your components by using the fontFamily style property. You can set this property in an external style sheet, a <mx:Style> block, or inline. This property can take a list of fonts, as the following example shows:

.myClass {
    fontFamily: Arial, Helvetica;
    color: Red;
    fontSize: 22;
    fontWeight: bold;
}

If the client's system does not have the first font in the list, Flash Player attempts to find the second, and so on, until it finds a font that matches. If no fonts match, Flash Player makes a best guess to determine which font the client uses.

Fonts are inheritable style properties. So, if you set a font style on a container, all controls inside that container inherit that style, as the following example shows:

<?xml version="1.0"?>
<!-- fonts/InheritableExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     VBox {
        fontFamily: Helvetica; 
        fontSize: 13pt;
     }
     
     HBox {
        fontFamily: Times; 
        fontSize: 13pt;
     }
     
     Panel {
        paddingLeft: 10;
        paddingTop: 10;
        paddingBottom: 10;
        paddingRight: 10;
     }
  </mx:Style>

  <mx:Panel title="Styles Inherited from VBox Type Selector">
     <mx:VBox>  
        <mx:Button label="This Button uses Helvetica"/>
        <mx:Label text="This label is in Helvetica."/> 
        <mx:TextArea height="75">
            <mx:text>
            The text in this TextArea control uses the Helvetica font 
            because it is inherited from the VBox style.
            </mx:text>
        </mx:TextArea>
     </mx:VBox>
  </mx:Panel>
  <mx:Panel title="Styles Inherited from HBox Type Selector">
     <mx:HBox>
        <mx:Button label="This Button uses Times"/>
        <mx:Label text="This label is in Times."/> 
        <mx:TextArea height="75">
            <mx:text>
            The text in this TextArea control uses the Times font 
            because it is inherited from the HBox style.
            </mx:text>
        </mx:TextArea> 
     </mx:HBox>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example defines the HBox and VBox type selectors' fontSize and fontFamily properties. Flex applies these styles to all components in the container that support those properties; in these cases, the Button, Label, and TextField controls.