Recipe 8.14. Ensuring that Text Displays in the Original Font

Problem

You want to make sure that your movie's text will display in the correct font even if the user does not have that font installed on her system.

Solution

Embed the font. Or, if you want to continue to use device fonts, choose one of the font groups from the font menu (text fields) or set the fontFamily style (text area and text input) to one of the font groups. This latter option does not guarantee that Flash will use the exact font you use during authoring time, but it does guarantee that Flash will substitute at least a similar font.

Discussion

By default, Flash uses device fonts for dynamic and input text fields as well as for text input and text area components. If you don't use a font that the user has installed on her computer, Flash will substitute the default font. In many cases, this is not something that you want to have happen. So you have two options:

• Embed the font. This approach guarantees that the exact font will be used every time the movie is played, regardless of the fonts available on the user's computer. The downside is an increase in file size. However, each font is embedded only once, even if it is used in multiple text fields, text inputs, and/or text areas.

• Continue using device fonts, but select one of the three font groups (_sans, _serif, or _typewriter) instead of a specific font. These font groups allow you to tell Flash what style of font to use. The benefit is that there is no increase in file size since you are not embedding fonts. The downside is that you don't get as much control over the fonts as you do when you embed the font.

How you can go about embedding a font or selecting a font group depends on whether you are using a component (text input or text area) or a text field. In order to embed a font for a text field, select the instance on the stage using the Selection tool, and then click on the Embed button in the Property inspector. From the Character Options dialog box, you should choose Specify Ranges. Choose to embed only the ranges of characters you plan to use so as to keep the file size increase to a minimum. If you know that you will display only uppercase and punctuation characters, for example, then choose those ranges. If you plan to use all the standard characters in the Latin character system, then choose Basic Latin, which includes uppercase, lowercase, numeric, and punctuation. If you plan to use the text field for user input, including the Basic Latin characters is usually a good idea. You can also add specific characters by entering them in the "Include these characters" field. Embedding specific characters is useful if you plan to use only a few characters and/or if you plan to use nonstandard characters such as symbols. You can select multiple ranges by holding the Ctrl key (Windows) or Command key (Macintosh) while clicking on the ranges with the mouse. That is all that is required to embed fonts for a text field.

When you are using large character sets, such as Japanese and Chinese fonts, you should avoid embedding the entire font. Doing so will significantly increase the file size of the movie. Instead, use device fonts. Or, if you need to embed fonts, embed just the necessary subset.

If you want to use a font group with a text field, select the text field on stage and then choose the font family from the Font menu in the Property inspector. Choose from _sans, _serif, or _typewriter.

There is no authoring time way to embed fonts or specify a font group for a text input or text area. However, the ActionScript code to accomplish the task is relatively simple. Assuming that you want to use an embedded font with a text input or text area, you first need to embed the font in the Flash movie. One way to do that is to create a font symbol. A font symbol resides in a shared library. That ability is beneficial if you plan to include the same font in multiple Flash movies that are loaded into a parent movie at the same time. However, that is a rather unlikely event. And font symbols have the distinct disadvantage that they require you to embed the entire font. Therefore, a much more practical approach is to embed the font using a text field. Create a dynamic text field off the visible portion of the stage. There is no need to place any text within the text field. Nor do you even need to give it an instance name. But you do need to embed the font using the text field in the same manner as described three paragraphs previously by means of the Character Options dialog box. Once you've embedded the font in the Flash movie in that manner, you can apply that font to a text input or text area by means of the setStyle( ) method. There are two steps: tell the instance that it should use an embedded font, and then tell the instance which font to use. The basic syntax is as follows:

 componentInstance.setStyle("embedFonts", true); omponentInstance.setStyle("fontFamily", "name of font"); 

For example, assuming that you have embedded the Times New Roman font, and you want to apply that font to a text area instance named ctaOutput, your code should look like the following:

   ctaOutput.setStyle("embedFonts", true); ctaOutput.setStyle("fontFamily", "Times New Roman"); 

If you want to apply the same font to every component instance in your Flash application (including Buttons, Lists, and so on), you can apply the setStyle( ) method calls to the global style object as follows:

 _global.style.setStyle("embedFonts", true); _global.style.setStyle("fontFamily", "Times New Roman");