Font Embedding with Flex 4

Social Share Toolbar

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"  />

Your ads will be inserted here by

Easy AdSense Pro.

Please go to the plugin admin page to paste your ad code.

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.

7 thoughts on “Font Embedding with Flex 4

  1. I like the technique here, however I found FB4 has also placed one more quick ability to embed fonts. Although your technique is nice and modular, if your ever not confident with font embedding you can embed fonts into your flex 4 app this way:
    - Start a new flex app
    - Go to design view
    - Open the “Appearance” tab on the right
    - In the font drop down list, you can choose browse to find your font files.

    This will automagically generate all code required, and place it all within an auto generated CSS file.
    It’s odd that you cannot choose browse, or the custom font from the properties panel, but this is a quick shortcut to quickly get all the code for embedding within your app. Stones throw from more customization..

  2. This technique works well if you are only using the old Halo (mx:) components, but not the newer Sprak (s:) ones.

    The Spark components use the new TLF classes for font rendering which require the CFF (compact font format) option set to true.

    So, if you have a mix of mx: and s: components (like any decent sized Flex app will since Spark is still missing a bunch of important components), then you either have to embed the fonts twice (once with cff=true and once with cff=false), or start messing around with hacks on how to get TLF based textfields into your mx: components which doesn’t work for all components ( http://opensource.adobe.com/wiki/display/flexsdk/FTE+and+TLF+text+in+MX+components?pageVersion=66 )

    = No fun at all…

  3. Thanks your example is very nice.

    But i have a problem when i apply the embed font name at run time using setstyle method my label on which i apply font , the text is hide.

    Why it is happening ?