MadeByPi® Blog

Reducing the drudgery of embedding fonts in AS3

Using and managing embedded fonts in Flash is a lot easier than it was a few years ago, but I still find myself repeating tedious steps of set-up each time I need to create a new font-asset swf.

So, I created an Air application to do it for me

Skip to the end to download the app and source, or read on for all the juicy details...

Generally speaking, the following need setting in a font asset class...

• font source
• font name
• font style
• font weight
• mime-type
• Unicode character range(s)

All of which are fairly simple to just input, except the character ranges. These are represented in a comma separated list of U+Hex values that define the ranges of characters, or individual character values to include when transcoding.

For example the range "U+0061-U+007A" defines the lower-case characters a-z, "U+0061-U+007A,U+0041-U+005A" defines lower-case 'a' through to upper-case 'Z', and "U-0061-U+0061" defines a single character, the letter 'a'

Which isn't that bad if you're only embedding the 'standard' English ranges for letters and punctuation. But when it comes to using other symbols, Latin characters, Hebrew glyphs or other non-English ranges - and keeping on top of the compiled file-size - it gets trickier.

To keep the font file-size as small as possible, ideally, you should only embed the characters you need. But to include the characters needed for a typical European language you'll often have to embed both Basic Latin (95 glyphs), and Latin Extended-A (128 glyphs). Within those 223 glyphs there are many characters that will, more than likely, never be used.

So, in order to easily generate Unicode ranges for the specific characters you need, I created a utility class. Which was really useful, and helped me reduce the size of a font swf on a recent project by half.

I considered releasing the class here with a little explanation on how to use it, then decided it would be a lot more useful if it was integrated into an application that could generate full font-asset classes automatically.

So here it is, an Air application that generates font asset classes for you.

On opening the application, the project path will default to the start-up location (wherever the app is invoked from - most likely your system desktop) but you can also manually set the project path. The project path is used to work out where to save the class and also the relative location of your font files to be embedded.

If you load from a short-cut in an existing Flash project with a /src folder, that will be used as the project path, and it will initailly look for /lib when you browse to add a font file.

You can specify multiple fonts in one class file, each with customisable embed ranges and properties. Once you're happy with the settings, hit generate and a Fonts.as will be saved in the project directory.

It's not a fool-proof tool, but hopefully it's easy enough to use and soon you'll be generating your own Font classes with minimal fuss, and if you're not comfortable running the self-signed Air installer or want to make changes, you can compile it yourself with the included project files.

Update 26/03/2010

After recommending the UnicodeRangeCreator class on Twitter, I remembered a few bug-fixes I'd implemented but not uploaded. So now the class and Air app are up-to-date.