Leave a Comment | Jun 20, 2008
Embedding fonts in Flex 3
Fonts are the creative content of the font designer or foundry, so if you don't have a collection of fonts you've paid for, and aren't planning on purchasing some, you should stick to free fonts. A good place to start is Google, you'll find plenty of foundries who make a few free fonts, and several sites like [http://www.fonts.com/]. You may choose to embed a particular font that came with your operating system for the sake of cross-platform uniformity as well, however you still need to make sure that it is either an OTF (Open Type Font) or TTF (True Type Font), as Flex works with these file types. There are ways to convert postscript and other font formats to OTF/TTF but it's tedious and you're better off finding a different compatible font
You can also load fonts as an external resource in your apps similar to just calling a system font, however embedding them is the way to go. Embedded fonts can be anti-aliased, take part in effects, and are handled as a true asset and thus with a higher regard in your application.
There are a number of ways to embed fonts in your Flex applications. If you'reembedding a font that's active in your system you can specify the system name as in the following example:
@font-face { src: local("Arial"); fontFamily: MyFont; }
Likely however you'll not want to keep a whole bunch of fonts active or have to think about activating your project fonts every time you compile, in which case you can copy the font file to your project directory. In the example below the Arial font is in a 'fonts' sub-directory of my project:
@font-face { src: url("/fonts/Arial.ttf"); fontFamily: MyFont; }
Note: If you use spaces in the font family as in "My Font" you'll run into an issue where the font appears in Design View but isn't compiled with the app.
There are other options that can be specified to customize your font-face:
fontStyle: normal | italic | oblique; fontWeight: normal | bold | heavy; advancedAntiAliasing: true | false;
These style declarations are placed within the mxml <mx:Style> tag. The above code uses CSS, which is best for styling and skinning your application, but if you prefer you can do the same thing in actionscript.
For more information on how to, and why you should/shouldn't embed a font in your applications refer to [http://livedocs.adobe.com...fonts_09.html]
Keep in mind that font files can be quite large, in the 5-12MB+ range and that size will be added to the weight of your application. It's best to use lighter fonts when creating online apps, in which case try to find one's under 200KB.