I thought I was done with the Flash-embedded-font in my previous blog entry, but there is more. I received an email requesting help with CSS and embedded fonts, and when I looked into it, found some quirks related to the CSS specified font-family and bold/italic text.

Scenario:

• The font 'Tahoma' is in the fla library. It's assigned the name 'MyFont1' in its properties and linkage.
• There is a text field nested in a movieclip and rotated slightly (so I can verify its using embedded fonts -- non-nested font textfields become invisible when rotated). The textfield's properties are Arial, html and embedFont=true.
• A css stylesheet is linked to the textfield.
• The field is populated with html text from a text file.

As I mentioned in the previous blog, if you want to have bold, italic or bold/italic characters in the text field, you need to include the font in the fla library multiple time, one for each of the bold or italic styles. For any bold or italic characters in the field, Flash will automatically grab fonts from the correct library font even though the specified font for the field is the base, non-bold, non-italic font in the library.

However, with CSS it’s a little tricky. If you use CSS to specify the font for the field, which font name should you use -- Tahoma or MyFont1? i.e. the original font name or the name you assigned to the font? Based on the way the font selector in the text field properties works and based on the overall message of my previous blog, you would think you should use MyFont1 or maybe MyFont1*.

It turns out you can use "Tahoma" or "MyFont1" (don't include an asterisk), but using Tahoma (the original name) works much better. If you use MyFont1, bold and italic specifications will be ignored. If you use Tahoma, they will work properly.

In fact, if you use TextFormat to query the font of each character, you will find that in both cases, the font is Tahoma -- MyFont1 is translated to Tahoma internally.

This is slightly annoying. Using the assigned name rather than the original name makes it easy to swap fonts throughout a project. Of course, swapping a CSS file is not that difficult either, so it’s not that bad.

This also applies to fonts in external shared library swfs. The importing swf can use either the original name or the assigned name. If you swap the shared library swf with another that uses the same assigned names but different original fonts, your font-family values pointing to the original font name won’t work. You will need to use the assigned name. Of course, then your bolds and italics won’t work.

What if the assigned name is the same as the original name? I.e. what if I assign the name Tahoma to the Tahoma font? (When I say "assign a name," I mean the Properties name and the linkage identifier name.) In this case, Flash will assume the name 'Tahoma' refers to the assigned name, not the original font name. In other words, italic and bold will not work.

Here's a demonstration:

Here's the CSS.

Here's the html

If you’re having problems getting CSS to work with embedded fonts, you can download this and study it.

My Recommended Best Practices for Embedded Fonts and CSS

• If possible, do not specify the font-family in the CSS. Just use the traditional textfield property font selector. You should use the assigned embedded font name here (the one with the asterisk, in this example above, MyFont1*). You can still use bolds and italics in your html text, either with the <B> and <I> tags, or CSS font-weight and font-style settings. Flash will automatically grab the correct font variation from the library (assuming it's there).
• The assigned font names should NOT match the original font names.
• If you need to vary fonts via CSS, use the original font names.
• If you don’t like the above bullet, or if you will be swapping shared font libraries, then do not use the <B>, <I> tags and do not use font-weight and font-style CSS properties. Instead, use span tags that use a CSS class that has a font-family pointing to the library font with the correct style. For the above example, MyFont-Bold (Tahoma with the bold style checked).