Jul
18

Embedding Fonts in Flex

Posted by Aaron West at 5:53 PM in Flex

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.

<mx:Style>
    @font-face {
        src:url("/fonts/elephant.swf");
        fontFamily: "Elephant";
    }

    .myText {
        font-size: 24px;
        font-family: "Elephant";
    }
</mx:Style>

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:

<mx:Text width="300" styleName="myText"/>

Note, not all embedded fonts can be used in all the different types of text components, like <mx:TextArea/>.

Aaron West's Gravatar
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 38666 times and has 10 comments.

1 related blog entries

10 Responses to Embedding Fonts in Flex

  1. You should also take a look at Ben's post, as he covers other alternatives for embedding fonts.

    http://blog.benstucki.net/?p=40

  2. thanks for the usefully Informations. I added this article in my favorites. It`s interesting and usefully.

    @thanks for sharing it, Werbeagentur Harun Isik

  3. Chris's Gravatar Chris

    This is a great tutorial and I've referred quite a few people to it. Just one question: do you have to use True Type fonts when you're in Flash or does that not matter since you're just creating a swf in the end?

  4. @Chris - Good question regarding the types of fonts you can embed in Flash. It's been awhile since I last embedded fonts in Flash so I am not 100% sure what types of fonts you can work with. I want to say I've embedded Open Type and True Type, but I'd have to create a test to be sure.

    You can of course do this on your own following the tutorial. Try embedding different types of fonts and exporting your Flash movie. Then, run the Flash movie and check the results. If you do this, please post back here so others can benefit from what you learn.

  5. css Font examples , Properties , Attribute - - //
    http://www.css-lessons.ucoz.com/font-css-examples....

  6. Hello -
    I followed this tutorial and it worked great! However, the flex app I'm working on needs to support multiple languages, and even when I embed the glyph for Japanese, when the XML web service is returned to my flex app in japanese, it just doesn't display...any thoughts on how to support the multi languages when you embed them? Thanks!

  7. Thank you! The very best is that the resulting swf file does not increase its original size!

  8. @Clara - Be careful, your Flex app will be taxed by the file size of fonts you embed. That's how it works, your Flex app payloads the fonts so users don't have to have them on their computer.

  9. HI,
    How to load swf font at runtime.
    By default load swf in css automatically Embed with main application.
    So, how to reduce main application size.

  10. nhatranglion's Gravatar nhatranglion

    Thanks a lot for this!

Leave a Reply

Leave this field empty

If you subscribe, any new posts to this thread will be sent to your email address.

RSS