Some of the best looking Flex applications are those that steer away from the default styling. Using customized backgrounds, component skins, and even fonts help make your applications stand out from the crowd. I used all of these concepts when building twitterAIR, my Flex/AIR application that integrates with the Twitter service. But how do you get a font embedded into a Flex application and why would you want to do this?
If you're building an application and you like using standard fonts that reside on most computers - like Arial and Verdana - you don't need to embed any fonts. You can be confident most of your end users will have the fonts your application uses. However, if you design your application with a custom font or anything non-standard you'll need to embed the font in your application in order to ensure everyone sees the same thing.
The first step to getting the font into Flex is to embed the font in a Flash SWF. This is accomplished by opening Flash and creating a few dynamic text fields that use the font of your choice. Consider the following screen shot:
In this Flash document I've created three dynamic text fields all set to the Elephant typeface. The topmost text field is simply normal text (not bold and not italic). The middle text field has the Bold icon selected to make the text bold. The lower text field has the Italic icon selected to make the text italic. Note, that it is necessary to create a single text field that corresponds to normal text, bold text, italic text, or bold italic text, in order for the different attributes to be available in Flex. It does not matter the font size you choose or the size of the stage in Flash. At this point, we haven't actually embedded any fonts into the Flash document. Consider the following screen shot:
In order to embed the glyphs - or shapes of a given typeface - you must choose which glyphs you want to embed for each of the dynamic text fields on the stage. You have the option of including alphabetic characters, numbers, punctuation, and even more obscure glyphs as seen above. Each set of glyphs you choose will increase the file size of the SWF so only choose those that are absolutely necessary for your application. Select a dynamic text field, press the Embed button and choose the appropriate glyphs (you can use SHIFT and CTRL to select multiple glyphs). Repeat this procedure for all dynamic text fields.
You're now ready to publish your movie and create a SWF that includes your font. By the way, it's standard practice to create individual SWF's for each of the typefaces you want to use in your applications.
With your typeface exported and available in SWF format the next step is to tell Flex to load the external SWF into your application. This is accomplished within a <mx:Style/> block.
There are two parts to the style block above. The first part tells Flex where your external font SWF is located. I typically create a fonts folder and put all font SWF's in it. In the code above, the path /fonts/elephant.swf corresponds to a font folder in the root of my Flex project. Next, you need to list the name of the font family that is embedded in the specified path. If the dynamic text fields in Flash listed "Elephant" as the font face you would type "Elephant" as the fontFamily. If the dynamic text fields in Flash listed "Ele phant" you would need to type the same thing, with the spaces, in Flex. It's important to get this step right or things won't work. Next, you define a CSS class and specify the font attributes, like size, of your text. The value you put for font-family should match what you typed for fontFamily in the @font-face font import.
You're now ready to use your font in various places of your application. For instance, a text field:
Note, not all embedded fonts can be used in all the different types of text components, like <mx:TextArea/>.
About this post:
This entry was posted by Aaron West on July 18, 2007 at 5:53 PM. It was filed in the following categories: Flex. It has been viewed 38568 times and has 10 comments.
1 related blog entries
- Lee Brimelow on Creating Runtime Loaded Fonts in Flash CS4 (March 16, 2009)