Embedding Fonts for Flex in SWC

Its common that when a Flex developer needs to embed certain assets like images, fonts or skin graphics, SWF is the first thing that one would assemble using Adobe Flash CS3, but I was just wondering instead of loading the assets library at runtime, why not compile it within the main flex project. As we usually do with other library files which needs to be included, I would then need to build a SWC using the Adobe Flash CS3 which shall contain the assets.

To try out, lets look at embedding few fonts which I wish to use in Flex project for styling the label text. Open Flash CS3, and follow the steps to create an SWC in which fonts are embedded.

1. Embed a font by going to the library, and in the top right corner drop down, select “New Font…”. In the dialogue box, select the font that you want to embed, and give it a library name.
2. Then, in the library, right click the font, and select “Linkage…”.
3. Select “Export for ActionScript”, and give the font a class name, I gave here as com.thepixelcode.fonts.EmbedSensation.
4. While exporting make sure that the option Export SWC is selected, you can name at this point the SWC as FontsLibrary.swc.

Fire up your Flex Builder 3 and follow this steps :

1. Create a Flex project called SampleFontTest and click Next.
2. Let the output folder be bin-debug and click Next.
3. In the Main Application Field, I usually prefer to name it as index.mxml, this is because when hosting on servers, its easy to deploy through scripts (don’t need t change name or do a mapping).
4. Now in the Navigator you should find your flex project, and in the libs folder add the FontsLibrary.swc.
5. Look at the code below for  index.mxml where during the project initialization the fonts are registered and can be used as fontNames for labels or text.

import com.thepixelcode.fonts.*;

//Registering fonts embedded in FontsLibrary.swc during initialization

public function init():void {

Font.registerFont(com.thepixelcode.fonts.EmbedGoudyTwenty);
Font.registerFont(com.thepixelcode.fonts.EmbedKomika);
Font.registerFont(com.thepixelcode.fonts.EmbedMothproof);
Font.registerFont(com.thepixelcode.fonts.EmbedSensation);

}

You can find the source code below to try and test, there are other ways to register the font, but would simply increase code or add would need to add CSS definitions for styles.

SampleTestFont Source Zip