runtime font loading in Flash/AS3

Question

Imagine you're creating a presentation that will be translated into a dozen different languages, including ones with non-latin characters (Chinese, for instance). The client's branding style guide dictates that certain fonts are acceptable for certain languages. The content itself is required to be externalized, so that the text can be replaced without ever opening a .fla, or re-saving a graphic.

So we're talking dynamic TextField s, populated from XML, with the font swapped out to accommodate the viewer's locale - what's the most painless way to dynamically load only the fonts required (regardless of the filesize), and apply them as necessary? I'm looking for solutions using Flash only, not Flex.

Answer 1

I'm totally disappointed that no-one knew about this - oh well. I finally found someone who'd written a little class to handle the font-loading process, and gave directions on how to create the .swfs for it to load:

Flash AS3 Loading Fonts

Hopefully other people'll find this helpful - it turned out to be the magic bullet for my problems.

Answer 2

This is a bit of a hassle in flash, but it is entirely possible. What you will need to do is to "embed" the font inside a separate swf, load this swf from your main application and then register that font inside that swf aswell. This will allow you to do runtime loading of fonts. This will require you to either specify the font per language in the application or in whatever files you store the translations in, which perhaps isn't perfect, but neither is embedding all fonts in your main application. That would amount to possibly hundreds of kb of fonts loaded for no reason.

This blog post has a good rundown of what you need to do to get it working. I have done this myself too, so if you're interested I can expand this post with some examples later.

Answer 3

Well, you'll some how have to know what language you're loading. Autodetection can be quite difficult.

Assuming you know what language the content is you can register fonts to be used in runtime using Font.registerFont(); With this you can load a swf that contains a font, register it, and it's available for future use in all textfields. print("code sample");

[Embed(src="someFont.ttf", fontFamily="myFont", mimeType="application/x-font")]
private var fontClass:Class;

...

Font.registerFont(fontClass);

Note that you'll have to compile using the flex compiler to support the Embed tag.

A good utility in addition is Font.hasGlyphs(), which you can use to check if the characters you are using are available in an embedded fonts. This can be used to either jump back to a system font or display a warning to you as the developer (if you forgot some characters or whatever). Subclassing TextField to do this check automatically may be a good idea.

If this is going to be online, in general embedding Chinese is something you should think about twice. Embedding all characters will increase the filesize a lot and afaik there aren't that many complete Chinese fonts available anyway. The technique above is of course still useful for many other languages.

Answer 4

First off, make sure you set expectations so that nobody thinks you'll be using embedded fonts in Asian languages like Chinese and Japanese. Unless you plan to load in several megabytes of glyphs, you'll be using device fonts, full stop. As such, it's reasonable to have guidelines on which class of font to use - _sans, _serif, _typewriter or their localized equivalents - but not guidelines on the font per se.

Secondly, in the past, my approach has always been to convince people that in most cases, they're probably better off with device fonts anyway. Using device fonts will cut your development time and avoid bugs. It will make your content load faster (if over the network), and in virtually all cases it will render faster. Often, it will be more clearly legible as well.

Clients like to demand that all their body text be in Garamond-Extra-British or whatever, but make sure they know the costs involved. If they see the light, you'll save yourself significant pain.