Embedding fonts in Flash

Learn how to include specials characters in Flash from a font

This post is a tutorial about how to embed fonts in Flash. Enjoy it and you may also want to take a look at another text that gives a good base to this topic:

Different languages and fonts

The possibilities

To embed a font in Flash you can chose between adding only one character set into a specific text box or including an entire font in the library.

The first option is the most basic and solve the problem only in the text box that you have embed the characters, however offers the possibility to include only one set of characters, reducing the final file size. The second one is good when you need the whole font, or you want to reference it by ActionScript, allowing you to use it as a shared library between different swfs.

Font at the text box

When you use a dynamic or input text you’ll need to add the necessaries characters to that text box, otherwise it won’t display the characters or the font will be replaced by the system default.

To do this, create manually a text box on Stage, select it and click the Embed button at the Properties panel:

Embed

A window will appear and then you need to define the character set (unicode range) that you want to be always available for your text box to display the font properly:

Embed

Specify the character set with Ctrl + Click, or type only those that are extremely necessary. If you choose the first option "All" you are actually including the whole font, which makes the file very large. If you really need to include all at once, it might be best for you to include a font in the library.

Entire font at the library

In this option you will include all characters in the library and the font will be referenced by the name you gave it, as a class.

Press F11 to open the Library panel and click on the top arrow or right click inside the library content to choose the option "New Font".

Library

The opened window will have the option to choose the font, give it a name and set also if it’s either bold or italic.

Library

By completing these steps, in your library will be an entire font, with the name you gave it (and not the font name itself) and with the type font.

Library

In the Properties panel (Ctrl + F3) you will see that your embed font will appear with the given name and an asterisk next to it, indicating that it’s a font available in the library.

Library

Now that it’s ready to be used, you can use it in your manually created text boxes selecting it trough Properties panel, or you may create dynamically a Textfield using ActionScript. But before you’ll need to set the Linkage:

Library

With the linkage set, the font can be accessed trough ActionScript as a class:

var myFont:Font = new MyFontIsKozuka();
var myTextField:TextField = new TextField();
myTextField.text = "Hi there!";
var myTxtFrmt:TextFormat = new TextFormat();
myTxtFrmt.font = myFont.fontName;
myTextField.setTextFormat(myTxtFrmt);
addChild(myTextField);

The linkage allows you to build a separated swf that contains only the font and to use it as a shared library between multiple swfs. This way it’s possible to reduce the download time on a site more complex, with multiple swfs in the same application.

In this tutorial were presented two different methods, it’s up to you to choose which one is the best in your case. Anyhow, I recommend the reading of the complementary text Embedding fonts, from the Adobe website.