Embedding fonts from a Flex application into a Flash SWF file

The following examples show how you can embed a font from a Flex Library Project into a Flash application.

Note: For an example of embedding a font from Flash into Flex, see “Embedding fonts from a Flash SWF file into a Flex application” at FlexExamples.com.

Full code after the jump.

1. In Flex Builder 3, create a new Flex Library Project by selecting File > New > Flex Library Project from the main menu. Name your project “Library_Font_test”.
2. Create a new ActionScript Class in the Flex Library Project by selecting the project in the Flex Navigator and selecting File > New > ActionScript Class from the main menu.
3. In the Name field, enter “FontsFontsFonts” and click the Finish button. Flex Builder will create a FontsFontsFonts.as document in the project’s /src/ folder.
4. Enter the following code in the FontsFontsFonts.as file and save the document:

// ActionScript 3.0 (Flex Builder / Flex Library Project)
package {
    public class FontsFontsFonts {
        [Embed(source="C:/Windows/Fonts/arial.ttf", fontFamily="ArialEmbedded")]
        public const ArialEmbeddedFont:Class;
    }
}

5. Close Flex Builder and open Flash CS4.
6. Create a new ActionScript 3.0 file by selecting File > New from the main menu and then selecting “Flash File (ActionScript 3.0)” from the New Document dialog box’s General Tab. Click OK to create the new document.
7. Save the new Flash document as main.fla in an empty folder on your hard drive.
8. Enter the following code in frame 1 on the timeline of the Flash document:

// ActionScript 3.0 (Flash Authoring / Timeline)
var myFont:Font = new FontsFontsFonts_ArialEmbeddedFont();
 
var fmt:TextFormat = new TextFormat();
fmt.font = myFont.fontName;
fmt.size = 32;
 
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.defaultTextFormat = fmt;
tf.embedFonts = true;
tf.multiline = true;
tf.rotation = 15;
tf.text = "The quick brown fox jumps over the lazy dog." + "\n" + new Date().toTimeString();
tf.width = 400;
tf.wordWrap = true;
tf.x = 100;
tf.y = 10;
addChild(tf);

9. Copy the generated Library_Font_test.swc file from the Flex Library Project’s /bin/ directory, and save it to the same directory as the main.fla file saved in step 7.
10. Select File > Publish Settings from the main menu to display the Publish Settings dialog box.
11. Select the Flash tab and click the Settings button next to the Script drop down menu to display the Advanced ActionScript 3.0 Settings dialog box.
12. Select the Library path tab and click the Add New Path button (the plus sign).
13. Select the new path row and click the Browse to SWC file button to display the Browse to SWC file dialog box. Locate the Library_Font_test.swc file you copied to the same directory as the .FLA file in step 9 and click the Open button.
14. Click the OK buttons to dismiss the Advanced ActionScript 3.0 Settings dialog box and the Publish Settings dialog box.
15. Select Control > Test Movie from the main menu to compile and run the .FLA file and view the generated .SWF file.

Tagged as: Embed, embedFonts, Flex, TextField, textFormat