You can embed fonts that are embedded in SWF files into your Flex applications. This lets you embed fonts in a Flex application that the Flex application compilers do not normally support.

When you embed a font in a SWF file that you use in your Flex application, you can embed any font that is supported by Flash 8. This includes Type 1 PostScript and bitmap (Macintosh only) fonts, as well as fonts with advanced anti-aliasing. To do this, you create a SWF file in Flash 8 that contains the fonts you want. You then reference that SWF file's font contents so that it is embedded into your Flex application.

In general, you should include the four primary typefaces for each font that you want to embed (plain, bold, italic, and bold italic). You should do this even if the font you are embedding does not have separate TTF for OTF files for each typeface. One reason to do this is that some Flex controls use one of the nonplain typefaces.

For example, the label on a Button control uses the bold typeface of the font that it uses. If you embedded a typeface and tried to use it on a Button, it would not be applied because the Button control requires the bold typeface.

Creating Flash 8 SWF files with embedded fonts

The first step in embedding fonts from SWF files in your Flex applications is to create a SWF file in Flash that contains those fonts.

1. Create a document in Flash 8.
2. Select the Text Tool, and create a text area on the Stage by dragging the mouse.
3. In the Properties panel, select the font that you want to embed from the font drop-down list.
4. Enter at least one character of text in the text area. If you are embedding more than one font, it is helpful to enter the name of the font and its typeface; for example:

   

5. In the Properties panel, select Dynamic Text from the drop-down list to make this text dynamic.
6. If you use advanced anti-aliasing in your fonts, ensure that either the Anti-Alias for Readability or Custom Anti-Alias option is the selected anti-aliasing mode. If you select any other option, Flash does not include advanced anti-aliasing information with your fonts' SWF file. For more information about using advanced anti-aliasing, see Using advanced anti-aliasing.
7. In the Properties panel, click the Embed button.

   The Character Embedding dialog box appears:

   

8. Select one or more character ranges to use. Select only the ranges that are necessary.

   You should select All only if it is absolutely necessary. The more glyphs that you add to the SWF file, the greater its size. For example, if you select All for Century Gothic, the final SWF file size is about 270 KB. If you select Uppercase, Lowercase, and Punctuation only, the final SWF file size is about 14 KB.

   Do not select Auto Fill unless you know exactly which characters you are going to use in your Flex application.

9. Create additional text-based controls, one for each of the typefaces you want (such as bold and italic). For the bold control, apply the bold typeface. For the italic control, apply the italic typeface. For the bold and italic control (if applicable), apply the bold and italic typefaces. For each typeface, select the range of glyphs to include in the SWF file.

   Your final Stage might appear like the following example:

   

10. Select File > Export > Export Movie.

    Flash generates a SWF file that you import into your Flex application.

Embedding fonts from SWF files into Flex applications

Before performing the following steps, you must create a SWF file in Flash that embeds the fonts (see Creating Flash 8 SWF files with embedded fonts).

1. Embed each typeface with an @font-face declaration, as the following example shows:

   /* assets/FlashTypeStyles.css */
   @font-face {
       src:url("../assets/MyriadWebProEmbed.swf");
       fontFamily: "Myriad Web Pro";
   }
   @font-face {
       src:url("../assets/MyriadWebProEmbed.swf");
       fontFamily: "Myriad Web Pro";
       fontWeight: bold;
   }
   @font-face {
       src:url("../assets/MyriadWebProEmbed.swf");
       fontFamily: "Myriad Web Pro";
       fontStyle: italic;
   }       
   
   
   

   You specify the location of the SWF file by using the src property. You set the value of the fontFamily property to the name of the font as it appears in the list of available fonts in Flash. You must specify a new @font-face entry for each of the typeface properties if the font face is not plain. For more information on using the @font-face declaration, see Embedded font syntax.

   Do not specify a value for the advancedAntiAliasing property in the @font-face declaration. This is because anti-aliasing settings in Flash determine whether to include the advanced anti-aliasing information. After a SWF file that contains fonts has been generated, you cannot add the hinting information to the SWF file by using the Flex compiler or from within the Flex application. For more information on using advanced anti-aliasing, see Using advanced anti-aliasing.

2. Define a style for each embedded font typeface. You can define this style as an external style sheet or in a <mx:Style> block, as the following example shows:

   /* assets/FlashTypeClassSelectors.css */
   .myPlainStyle {
       fontFamily: "Myriad Web Pro";
       fontSize: 24;
   }
   .myItalicStyle {
       fontFamily: "Myriad Web Pro";
       fontSize: 24;
       fontStyle: italic;
   }
   .myBoldStyle {
       fontFamily: "Myriad Web Pro";
       fontSize: 24;
       fontWeight: bold;
   }
   
   

   You must specify the fontFamily property in the style definition, and it must match the fontFamily property set in the @font-face declaration. Regardless of which typeface you are defining, the value of the fontFamily property is the same. For example, if the typeface is boldface, you do not set the fontFamily property to Myriad Web Pro Bold, but just Myriad Web Pro.

   You must also specify all typeface properties in the style definition, just as you did in the @font-face declaration.

3. Apply the new style to your Flex controls, as the following example shows:

   <?xml version="1.0"?>
   <!-- fonts/EmbedAntiAliasedFonts.mxml -->
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Style source="../assets/FlashTypeStyles.css"/>
     <mx:Style source="../assets/FlashTypeClassSelectors.css"/>
   
     <mx:Panel title="Embedded Font" width="220">
        <mx:VBox> 
           <mx:Label text="Plain Label" styleName="myPlainStyle"/> 
           <mx:Label text="Bold Label" styleName="myBoldStyle"/> 
           <mx:Label text="Italic Label" styleName="myItalicStyle"/> 
        </mx:VBox>
     </mx:Panel>
   </mx:Application>
   The executing SWF file for the previous example is shown below:
   
   
   
   

   You can also define and apply the styles inline, rather than define them in a style sheet and apply them with the styleName property. The following example sets the value of the fontFamily and fontStyle properties inline to apply the Myriad Web Pro font's italic and bold typefaces to the Label controls:

   <?xml version="1.0"?>
   <!-- fonts/EmbedAntiAliasedFontsInline.mxml -->
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
     <mx:Style source="../assets/FlashTypeStyles.css"/>
   
     <mx:Panel title="Embedded FlashType Font" width="220">
        <mx:VBox> 
           <mx:Label text="Plain Label" fontFamily="Myriad Web Pro" fontSize="24"/> 
           <mx:Label text="Italic Label" fontFamily="Myriad Web Pro" fontStyle="italic" fontSize="24"/> 
           <mx:Label text="Bold Label" fontFamily="Myriad Web Pro" fontWeight="bold" fontSize="24"/> 
        </mx:VBox>
     </mx:Panel>
   </mx:Application>
   The executing SWF file for the previous example is shown below:
   
   
   
   

The following example embeds the Myriad Web Pro font into the Flex application. It embeds each typeface, defines the styles for them, and applies those styles to Text controls.

<?xml version="1.0"?>
<!-- fonts/EmbedAntiAliasedFontsFull.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebProEmbed.swf");
        fontFamily: "Myriad Web Pro";
     }
     @font-face {
        src:url("../assets/MyriadWebProEmbed.swf");
        fontFamily: "Myriad Web Pro";
        fontWeight: bold;
     }
     @font-face {
        src:url("../assets/MyriadWebProEmbed.swf");
        fontFamily: "Myriad Web Pro";
        fontStyle: italic;
     }     
     .myPlainStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
     }
     .myItalicStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontStyle: italic;
     }
     .myBoldStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontWeight: bold;
     }
  </mx:Style>

  <mx:Panel title="Embedded SWF-based Font">
     <mx:VBox> 
        <!-- Apply each custom style to Text controls. -->
        <mx:Text id="text1" styleName="myPlainStyle" text="Plain Text"/>
        <mx:Text id="text2" styleName="myBoldStyle" text="Bold Text"/>
        <mx:Text id="text3" styleName="myItalicStyle" text="Italic Text"/>
     </mx:VBox>
  </mx:Panel>
  
  <!-- Rotate the Text controls. If the text disappears when the control is
     rotated, then the font is not properly embedded. -->
  <mx:Button label="Rotate +1" click="++text1.rotation;++text2.rotation;
     ++text3.rotation;"/>
  <mx:Button label="Rotate -1" click="--text1.rotation;--text2.rotation;
     --text3.rotation;"/>   
</mx:Application>
The executing SWF file for the previous example is shown below:

When you run the example, click the Button controls to rotate the text. This ensures that the fonts were properly embedded; if the fonts were not properly embedded, the text disappears when rotated.

Instead of using the @font-face CSS syntax, you can use the [Embed] metadata keyword to embed fonts from SWF files in your Flex application. This can give you greater control over the font in ActionScript. To do it, you use the same SWF file that you created in previous examples. In your Flex application, you associate each font face with its own variable, as the following example shows:

<?xml version="1.0"?>
<!-- fonts/EmbedAntiAliasedFontsActionScriptSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myPlainStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
     }
     .myItalicStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontStyle: italic;
     }
     .myBoldStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontWeight: bold;
     }
  </mx:Style>
  
  <mx:Script><![CDATA[
  
        [Embed(source='../assets/MyriadWebProEmbed.swf', 
            fontName='Myriad Web Pro'
        )] 
        private static var plainFont:Class;

        [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf', 
            fontName='Myriad Web Pro', 
            fontStyle='italic'
        )] 
        private static var italicFont:Class;

        [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf', 
            fontName='Myriad Web Pro', 
            fontWeight='bold'
        )] 
        private static var boldFont:Class;
  
  ]]></mx:Script>

  <mx:Panel title="Embedded SWF-Based Font">
     <mx:VBox> 
        <!-- Apply each custom style to Text controls. -->
        <mx:Text id="text1" styleName="myPlainStyle" text="Plain Text"/>
        <mx:Text id="text2" styleName="myBoldStyle" text="Bold Text"/>
        <mx:Text id="text3" styleName="myItalicStyle" text="Italic Text"/>
     </mx:VBox>
  </mx:Panel>
  
  <!-- Rotate the Text controls. If the text disappears when the control is
     rotated, then the font is not properly embedded. -->
  <mx:Button 
    label="Rotate +1" 
    click="++text1.rotation;++text2.rotation;++text3.rotation;"
  />
  <mx:Button 
    label="Rotate -1" 
    click="--text1.rotation;--text2.rotation;--text3.rotation;"
  />   
</mx:Application>
The executing SWF file for the previous example is shown below:

You must define a variable of type Class so that the compiler links the fonts into the final Flex application SWF file. This example sets the value of the static plainFont, boldFont, and italicFont variables, but they are not used in the rest of the application.

When you use the [Embed] statement to embed fonts in your Flex application, you must still define styles for those fonts so that those styles can be applied to Flex components, as you would if you embedded the fonts with the @font-face declaration.

You can also access fonts from SWF files as a font symbol. You can do this only if you embed the fonts in your Flex application with the [Embed] metadata syntax.

Use fonts from SWF files that are Font Symbols

1. Create a new Flash 8 FLA file.
2. In Flash 8, select Window > Library to show the contents of the library. It should be empty.
3. Right-click the mouse when it is over the library, and select New Font to create a new font symbol.
4. In the Font Symbol Properties dialog box, give the new font symbol a name and select the applicable font symbol properties (such as bold or italic). You use the symbol name you specify here in your [Embed] statement. Do this for each font typeface (such as plain, bold, italic, and bold italic).
   Note: Do not set the value of the symbol name to be the same as the font name in the Font Symbol Properties dialog box. For example, if you are creating a new symbol for the font named Myriad Web Pro, set the symbol name to something other than Myriad Web Pro.

5. After you create a font symbol in the library, right-click the symbol in the library and select Linkage.
6. In the Linkage Properties dialog box, select Export for ActionScript, and click OK. The Identifier in this dialog box should match the symbol name you specified in the previous step. Do this for each font symbol in the library.
7. In your Flex application's [Embed] statement, point to the font symbol using the symbol attribute. Do not specify any other characteristics of the font such as the MIME type, fontStyle, fontWeight, or fontName in the [Embed] statement.

The following example embeds the Myriad Web Pro font that was exported from Flash 8 with font symbols in the library:

<?xml version="1.0"?>
<!-- fonts/EmbedAntiAliasedFontsActionScript.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myPlainStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
     }
     .myItalicStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontStyle: italic;
     }
     .myBoldStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontWeight: bold;
     }
  </mx:Style>
  
  <mx:Script><![CDATA[
  
        [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
            symbol='MyriadPlain'
        )] 
        private var font1:Class;

        [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf', 
            symbol='MyriadBold'
        )] 
        private var font2:Class;

        [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf', 
            symbol='MyriadItalic'
        )] 
        private var font3:Class;
  
  ]]></mx:Script>

  <mx:Panel title="Embedded SWF-based Font">
     <mx:VBox> 
        <!-- Apply each custom style to Text controls. -->
        <mx:Text id="text1" 
            styleName="myPlainStyle" 
            text="Plain Text"
        />
        <mx:Text id="text2" 
            styleName="myBoldStyle" 
            text="Bold Text"
        />
        <mx:Text id="text3" 
            styleName="myItalicStyle" 
            text="Italic Text"
        />
     </mx:VBox>
  </mx:Panel>
  
  <!-- Rotate the Text controls. If the text disappears when the control is
     rotated, then the font is not properly embedded. -->
  <mx:Button 
    label="Rotate +1" 
    click="++text1.rotation;++text2.rotation;++text3.rotation;"
  />
  <mx:Button 
    label="Rotate -1" 
    click="--text1.rotation;--text2.rotation;--text3.rotation;"
  />   
</mx:Application>
The executing SWF file for the previous example is shown below: