Font Embedding with Flex 4

I’ve been noodling around a bit with Flash Builder 4 lately. After creating a few simple apps I decided to look into font embedding. There are quite a few posts to be found via Googling about embedding fonts in Flex. Some are very good, others not so much, but I think I managed to compile the info into a useful example. My goal was to create custom font swfs, load them into flex, and then apply them to a text field through the use of some type of selector.

1. Create the Font SWF

Embed CharactersThe first step is to use Flash to create a font swf. To do so, create a new Flash document and add a dynamic text field to the stage. Select the text field and choose the font you want to use in your Flex application. Next, click the Character Embedding button from the Property panel and choose the characters that you want available to your Flex application. Choose only the characters you need as each extra character will add unnecessary size. Finally, publish the swf and place a copy in your Flex application folder.

Make a font swf for each font you want to use in your Flex application then close Flash.

2. Embed the Font SWF

The next step is to pull those font swfs into your Flex application and create classes, or styleNames, for them. This is done inside the fx:Style tag (mx:Style in Flex 3)

<fx:Style >
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";


		@font-face	{
			src: url("fonts/calvin.swf");
			font-family: "Calvin and Hobbes";
		}
		@font-face {
			src:url("fonts/lcd.swf");
			font-family:"LCD";
		}
		@font-face {
			src:url("fonts/ransom.swf");
			font-family:"RansomNote";
		}

		.calvin {font-family: "Calvin and Hobbes";}
		.lcd {font-family: "LCD";}
		.ransom {font-family: "RansomNote";}

	</fx:Style>

Note that the font-family is the name of the font as listed in the Flash IDE. Once this is done I can assign the styleNames “smack”, “square”, and “curlz” to an mx:Text field and it will be presented in that font, something like this:

<mx:Text id="myText" text="This is my text" styleName="calvin"  />

If you stop here you will have a text field using your embedded font.

3. Create a Font Selector

We can take this an additional step by adding a radio button group and a simple function to allow dynamic switching between fonts:

<fx:Declarations>
	<s:RadioButtonGroup id="radiogroup1"/>
</fx:Declarations>
<mx:Text id="myText" x="159" y="28" text="Select another font" styleName="calvin"   fontSize="20"/>
<s:RadioButton id="calvin" x="10" y="10" label="Calvin" groupName="radiogroup1" click="handleChangeFont(event)" selected="true"/>
<s:RadioButton id="lcd" x="10" y="36" label="LCD" groupName="radiogroup1" click="handleChangeFont(event)"/>
<s:RadioButton id="ransom" y="62" label="Ransom Note" groupName="radiogroup1" click="handleChangeFont(event)" x="10"/>

Note that, as an id for each radiobutton I used the class name they will invoke. This will allow me to use only one line of code in one function to assign the appropriate styleName to my text field:

<fx:Script>
	<![CDATA[

		protected function handleChangeFont(evt:Event):void {
		myText.styleName = evt.target.id;
	        }

	]]>
</fx:Script>

The finished product looks something like this:

Right-click on the swf and then click "View Source" to view or download the source.