headjump.de

There are a lot of tutorials online to tell us how font embedding works. Sadly most of them are incomplete and leave you alone with missing characters, bolds and italics and the question how to use font embedding for all your Textfields without always embed all the characters again.

This tutorial shows you how you get your fonts embedded properly.

This article covers embedding fonts within the flash IDE. (If you use Flex to compile, better embed it within Flex)

Why do I need font embedding?

Embedding a font means that flash stores the information on the characters of a font within your compiled flash application. When you use a font for your dynamict textfields without embedding it, a computer that misses the font will display a default font – like Arial if available. When you only embed a few characters and forget some, they just won’t be displayed. So the famous “Hello world” could be displayed as “He wrd” when you forget to embed “l” and “o”. Other sideeffects are that you need to embed the font of a Textfield when you want to apply rotation or alpha to your Textfield. A rotated Textfield without font-embedding will be invisible – all alpha-values you set will be displayed as 100% so you won’t get any transparency.

Dynamic or static or what?

You may have realized that I used to talk about dynamic textfields in the previous paragraph. That is because static textfields don’t need a special treatment to embed fonts. It just works. Some tutorials say static textfields don’t need embedded fonts, but this is only half-true: A static textfield automatically embeds the characters it contains.

This sounds easy but it won’t help you in most cases, because static textfields – as the name suggests – only display static text that can’t be changed by code during runtime.

Following are the steps I use for embedding my fonts:

Step 1: Add a font symbol to your library

Simply right-click at your library and choose New Font. In the upcoming window you can select the font you want to use and the font style (bold, italic). Just go with the normal style now, I’ll tell you later what to do when you also need bolds and italics. You also have to name your font. I’d suggest a basic title like appfont that can easily be reused during multiple projects without confusion.

The checkbox that says bitmap text and the size field are only interesting when you need a single fontsize to embed. Activating bitmap text causes flash to embed the font at the given size as bitmap date (not vecor data). Those are faster to display at runtime. But as long as you need different font sizes for e.g. titles and buttons you are save without bitmap text.

Step 2: Embed the characters you need

The font symbol you added to the library takes care of some basic embedding by itself – the most common letters and symbols are embedded. Unfortunately most of the “special” letters you need for e.g. European languages are missing. So we have to embed them on our own.

For this we add a textfield to our scene and name it font_embedder. We’ll use this textfield to embed all the characters we need. As font we’ll use the font we just added to our library. Type in the name you used (here: appfont). The asterisk at the end of the font name shows that this font is an embedded font:

To embed the necessary characters you need to click at the “Embed…” button for the textfield. This opens a dialogue where you can multiselect charactergroups from a predefined list and a field labeled “Include there characters” where you can add missing characters with your keyboard. This is the only point where you choose all the characters you need!

We only need the “font_embedder” textfield for embedding and don’t want it to be displayed at runtime, so we should remove it at the constructor of the document class (or dirty within the timeline) like:

removeChild(this["font_embedder"]);

Of course you could just use any other (already existing) dynamic textfield to embed all the characters you need, but believe me, it comes in quite handy to have the same font embedding symbol there for all of your applications that has no other purpose than to embed a font.

Step 3: Use it for every textfield

The magic secret here is that you don’t need to embed all necessary characters again for each dynamic textfield you need. You just need to “enable embedding” for each textfield.

• When you create a new textfield the first thing you do is set the font to the name you gave it in your library (here: appfont).
• Then you need to tell the textfield, that is has to use embedded characters. This can be done in two ways:
  • flash editor GUI: As soon as you embed a single character at the embed dialogue, “embedding” is enabled for this text fields and it will use all the characters you enabled with the “font_embedder”. So you don’t need to embed everything again, it’s enough to simply add the letter “a” for example.
  • ActionScript: Each Textfield has an embedFonts attribute that can be set to true to use embedded fonts.

In my opinion the first way using the GUI works fine because you don’t have to jump into code everytime you add a textfield.

Use the exported font symbol in your actionscript code

Thanks to Tim for your great tip on how to use the exported font for textfields created via Actionscript:

You will need to check ‘Export for Actionscript’ in the font symbol properties (library). Then create an instance e.g.

var txtLabel:TextField = new TextField(); 
var font:appfont = new appfont(); 
var txtFormat:TextFormat = new TextFormat(); 
txtFormat.font = font.fontName; 
txtLabel.setTextFormat(txtFormat);

Getting bold

Maybe you’ve already realized that the bold and italic characters are still missing. When you type some bold or italic characters they’ll just disappear at runtime.

In order to also embed the bold or italic styles of a font you just have to repeat Steps 1 and 2 – but this time you choose a different name for the font symbol and select one of the styles “bold” or “italic”. The name you give to the new font symbol doesn’t matter, because flash is smart enough to realize that it belongs to the same font like your first font symbol.

So you just have to add a font symbol, add a font embedder (e.g. “font_embedder_bold” for the bolds and “font_embedder_italic” for the italics) and use it to embed all necessary characters.

You still should use the old font name for your textfields (“appfont“), because – as mentioned above – flash realizes it’s the same font.

How to check

In order to check whether we’ve done font embedding correct or not we can profit from the fact that a compiled flash app won’t display a rotated dynamic texfield when the font is not properly embedded. So just try the following:

• add a dynamic textfield to your clip or just use an existing one with text in it (don’t forget to enable embedding here)
• rotate it a little
• compile and start your app

When you see the rotated text everything is working fine.

Alternatively you can temporarily uninstall the embedded font from your computer and run the swf again and see if it still uses the correct font – but this takes some time so I’d suggest to use the first way.

You should always check whether embedding works or not because the fact that you see all textfields with the correct font at your own computer is no prove at all – you don’t know if it still works with not having the font installed.

Quickreference

When you’ve already read the article this short list should be enough to remind you of all the necessary steps to get your fonts fine:

1. Add font-symbol to library
2. Use a single dynamic textfield to embed all the characters you need (“font_embedder“)
3. For each dynamic textfield: use embedded font name and embed at least one character

When you also need bolds or italics repeat steps 1 and 2 with the bold and italic styles of the font.

I hope this tutorial comes in handy and I’d really like to get your feedback. If anything is unclear please tell me! When you found a different way to handle font-embedding that works fine for you please tell me as well!