Ever tried to use really cool tiny fonts in Flash? If you have, then you must have noticed that Flash doesn't really accept them well. They look blurred or have some of the letters filled. Because of this we need to optimize fonts for usage in Flash. We cannot always import bitmap images into Flash since that would lead to a file size problem. In this tutorial we will show you how to make Flash specific fonts that render as desired.

In order to make bitmap-like fonts for use in Flash, you must create an outline font and tweak this outline so that when Flash renders the font, it won't "fill" the counters, which is a bug in Flash.


1. Open Fontographer

2. Choose File/New Font...

3. Choose File/Preferences...

4. Change Grid Spacing to 100 em units under Editing Behavior menu.

5. Choose Element/Font Info...

6. Ascent to 800, Descent to 200 and Em Square to 1000

7. Double-click your first letter, and switch to Guides layer. Choose View and turn Snap to Points/Guides/Grid on. Space grid at 100 em vertically and horizontally.

8. Draw each pixel as a square in your guide matrix. Move right sidebearing 100 em to the right of the rightmost pixel. Design rest of characters

9. Element/Recalc Bitmaps... enter 10 for the size.

10. Open the bitmap, and make sure it looks the same as your outline.

11. Kern letter pairs, in units of 100em.

12. Choose Element/Change Weight... and enter 5 em Check off all the boxes there. Got to do this so your characters don't "fill" in Flash.

13. The result. Do not recalculate the bitmaps after this.

14. Save font, and generate Type 1 postscript fonts.

15. Make sure you position the text block on the stage in whole increments for left aligned text, i.e. click on the text block, and look at the Object Inspectors' x and y values. If there is a number after the ".", change that number to 0 (zero) and hit return. Do it for both the x and y values. If you are aligning text right, then there should be a "75" after the ".", i.e. 465.75 for the x/y values.