Recipe 9.17. Embedding Fonts

Problem

You want to ensure that text displays properly, even if the intended font isn't installed on the user's computer.

Solution

Embed the font by using the [Embed] metatag. Then set the text field's embedFonts property to true, and apply the font to the text field using a <font> tag, a TextFormat object, or CSS.

Discussion

You should embed fonts if you want to ensure that text displays using the intended font, even if the user's computer does not have that font installed. To embed a font, use the [Embed] metatag. The [Embed] metatag should appear in an ActionScript file outside the class declaration. You can embed either TrueType fonts or system fonts. To embed a TrueType font with the [Embed] metatag use the following syntax:

[Embed(source="pathToTtfFile", fontName="FontName", mimeType="application/x-font-truetype")]

The path to the TrueType font file can be relative or absolute, such as in the following example:

[Embed(source="C:\Windows\Fonts\Example.ttf", fontName="ExampleFont", mimeType="application/x-font-truetype")]

The fontName attribute value is how you refer to the font from CSS or ActionScript.

The syntax for embedding system fonts is similar, except that it uses a systemFont attribute rather than a source attribute. The systemFont attribute value is the name of the system font you want to embed. The following embeds Times New Roman:

[Embed(systemFont="Times New Roman", fontName="Times New Roman", mimeType="application/x-font-truetype")]

The preceding example uses the same name for fontName as the actual system font name.

Once you've embedded the font, the next step is to tell the text field to use the embedded font. To do that, simply set the embedFonts property of the text field to true. By default, the property is false, which means that Flash uses device fonts. By setting the embedFonts property to true, the text field can use embedded fonts only. If you try to assign a device font to a text field with embedFonts set to TRue, nothing is displayed:

field.embedFonts = true;

Once you've enabled embedded fonts, your next step is to tell the text field which embedded font to use; you do this with a <font> tag, a TextFormat object, or with CSS. For example, if the fontName value is Times New Roman, your code might look like the following:

formatter.font = "Times New Roman";

The following example sets the font by using a font tag:

field.htmlText = "<font family='Times New Roman'>Example</font>";

And the following illustrates how to set the font by using CSS:

var css:StyleSheet = new StyleSheet(  ); css.setStyle("p", {fontFamily: "Times New Roman"}); field.htmlText = "<p>Example</p>";

You cannot specify a comma-delimited list of fonts if embedFonts is set to TRue.

Problem

Solution

Discussion

See Also