Flex Font Embedding

When you embed fonts, Flex stores all of the font information in the SWF file so the font is displayed properly even if it’s not installed on the user’s computer. If you use a font in your sources that isn’t installed on a user’s system, and you don’t embed the font in the SWF file, Flash Player automatically selects a substitute font to use instead. Sometimes you have to embed font event if you are sure that it is installed on a user’s system, because to mask, tween and skew dynamic text fields possible only with embedded fonts.

Note: You need to embed a font only if you’re using dynamic or input text fields. If you use a static text field, you don’t need to embed the font.

Advantages:

  • Consistent, predictable viewing of fonts in flash
  • Embedding fonts gives you the ability to mask , tween and skew dynamic text fields

Disadvantages:

  • Larger file sizes
  • Sometimes its difficult to predict which character outlines to embed.

Note: Each character set you select increases the final size of the SWF file because Flex has to store all of the font information for each character set that you use. You can add only certain characters from a font when embedding it to save file size by specifying the unicode-range property of your @font-face declaration.

If you want to embed a font in your Flex application and use it as the style for text-based components, you should add @font-face declaration in you CSS file.

The following example creates a class selector that references the font-family name of the embedded font. It then creates a Text control and sets its style to the class selector.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
horizontalAlign="center"
verticalAlign="center"
viewSourceURL="src/EmbeddingFonts/index.html">

<mx:Style>
@font-face
{
font-family: Copacetix;

src: url("assets/copacetix.ttf");
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */

U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */

}

.MyTextStyle
{
font-family: Copacetix;
font-size: 24pt;
}

</mx:Style>

<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>

</mx:Application>

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.