ActionScript: the htmlText, CSS and embedded fonts fiesta

Actionscript is usually great for simple font embedding and rendering purposes. Use the text property of a TextField with an embedded font and a TextFormat, and it works great. If, however, you want to get all ninja and use htmlText with CSS with embedded fonts, you're in for a bumpy ride.

Firstly, you may experience the unnerving phenomenon of text not appearing at all, as soon as you set the embedFonts property to true on the TextFormat object. Fear not, for Flash nuisances are easily tweakable. Check your css file and wherever you have more than one font enumerated in the 'font-family' property, just make it one single font name: the font you embedded. In the article linked above, adobe mention:

If using CSS styles to set fonts for TextFields, set the font-family CSS property to the name of the embedded font. The font-family property must contain a single name and not a list of names if you want to specify an embedded font.

What this might do for you is to show regular text, but completely omit formatted text (bold or italic), or simply replace it with unformatted text. If that happens, you have probably not embedded all the font faces. Read this article to find out how to embed all versions of a font (regular, bold, italic and bold-italic) within the same font family. If your embedded font already has these formatting inside the font file, try these tricks. If you're using the Flash IDE, it should be really similar. This forum thread might help.

The next problem which is very likely to occur is for the font to look aliased (i.e. blurry, hard to read). The solution is simply to create a TextFormat object with the font defined in the CSS style and assign it to the defaultTextFormat property of the TextField. Makes sense, right? No! I found this after considerable digging. Let me know if it works for you too.


Update:
if you're using multiple SWFs or RSLs and have issues with fonts, check out Alex's great post about that.