More embedded font strangeness – CSS

Tags:

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 the 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? In this case, 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. In other words, italic and bold will not work.

Here's a demonstration:

Replacement image.

Here's the CSS.

h1 {
	color: #333399;
	font-size: 14px;
	font-family: MyFont1;
}
h2 {
	color: #993333;
	font-size: 14px;
	font-family: Tahoma;
}
	
.italicText {
	font-style: italic;
}
.boldText {
	font-weight: bold;
}

Here's the html

<h1>The font family is MyFont1 (linkage name).</h1>
<h1><B>Bold</B>: This text should be bold (but is not).</h1>
<h1><I>Italic</I>: This text should be italic (but is not).</h1>
<br />
<h2>The font family is Tahoma (original name).</h2>
<h2><B>Bold</B>: This <span class="boldText">text</span> should be bold.</h2>
<h2><I>Italic:</I> This <span class="italicText">text</span> should be italic.</h2>

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 font setting in the 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).

Comments

Great posts - thanks for sharing this.

I wish I could find someone who has unraveled the similar, various quirks related to controlling video with the NetStream class. :)

Thank you *so* much for posting this, joelmay. Great stuff.

Let's hope Adobe straighten this out in Flash 9 eh.

Seems I spoke to soon... ;-)

I can't get Bitmap fonts to work using CSS. Without CSS, no problem - they render aliased. But with CSS... they will only render as anti-aliased. WTF? Grrr....

Any ideas anyone?

I tried some experiments with bitmap fonts. It seems pretty much everything in this blog does not apply in this case. In my little experiment, CSS did work, but I had to use the linkage name, not the original name. I'll post something here or in another blog entry after I figure it out better.

Also, they always look aliased to me, which is what is supposed to happen with bitmap fonts, I think. But I'm not sure at the moment.

OK, I've got it sorted too.

I've made a little demo movie if it helps anyone - download here.

Basically, if you are using a bitmap font with CSS:

- embed it in the library at your chosen size and tick the 'bitmap text' checkbox.
- Give it a linkage name ("myFont")
- In your CSS, refer to the linkage name of the font "myFont"), not the actual font name ("Arial")
- make sure embedFonts = true in your textField.

Thanks Pete. This issue is infinitely confusing. Bitmap embedded fonts have different weirdnesses than non-bitmap embedded fonts. Unlike non-bitmap fonts, if you use the original font name in the css, no text appears. So you have to use the linkage name as you state.

The downside of that is <b> and <i> tags do not work when using the font linkage name in your CSS (as mentioned above). So if you want to use bold and italic in your bitmap embedded fonts, you need to use spans and alternate css classes.

In the demo here (I added to your demo), you can see that after pressing the CSS button, only the second field has 'Lorem' bolded. The html text for the first uses a bold tag, the second uses a CSS style that uses a bold version of the bitmap font.

Good call, joelmay! Well spotted.

does the css file have to be external?

Doubt it. Although I haven't tried.

Excellent – finally someone helped me with the problem, I was at it for more than a year, and only now have I found good solutions.
ONE THING THOGH, could you PLEASE use your talents to help those of us (many thousands) who use right to left text (such as Hebrew or Arabic).
We still cannot find some strait way to use the wonderful technique you have here, without the lines braking in the wrong places and the text getting messed up.
The problem seems to happen only when one adds punctuation marks etc…
You think you can help the multitudes?
thanks

Great Post! This made my day! :)

Embedded fonts hell!

I have embedded two fonts in SWF's library exported first frame, linkage id etc. At runtime I create three text fields and populate with text from an XML file. The text fields are html formatted and I'm using AS to link the embedded fonts.

When I test the SWF's locally text appears with anti-aliased fonts embedded. When I publish to the server there's no text!!

I need help on this one!

Answer was a shared library. =)

Thanks for this post; I've been banging my head against a brick wall for the past month trying to get CSS with embedded fonts working

Hi there,
Thanks for that nice article. Because Flash takes *sooo* much time to compile a FLA with more than one embedded font I tried to create a shared font library version of your example, but without success. Do you know if it's possible to use this with a shared font asset ?

Very nice article. Thanks for sharing.

hi everybody,
thanks for the nice articles. they opened my mind. and now i am glad that others got similar problems like me ;)
it's easy to use embeded fonts as long as i am programming in a fla-file. when i am using an external as-class-file my gernerated textfields won't be displayed. but why? as i said, when i am using a similar script directly in the fla everything is working.
here you will the stuff i am using. there a two layers in the fla file. one layer with the internal script, one with the external. so you can experiment yourself. hope i discribed everthing clearly and hope you can help me solve this damn problem.
cheers, björn

Thank you so much.
You saved my day ... and the project.
:)

Thanks for all the info and testings - Has anyone managed to read in an external text file (including html tags) into a text field styled with CSS that specifies more than one font - AND embedded the fonts ? Is this possible ? If I embed one font then all CSS styles are over ridden and everything is in the embedded font.

Thanks,.

I'm using a stylesheet that has a couple of styles mapping (through the fontFamily property) to several fonts in my library. What I did, for example, was to use a different font for the italic parts, so I did something like...

css.setStyle(".strongItalic", {fontFamily:"font2", fontStyle:"italic"});
// and then...
var txt:String = "etc < i>etc< /i> etc";
myText.htmlText = txt.split("< i>").join("< span class='strongItalic'>").split("< /i>").join("< /span>");

ignore spaces in the tags. That was to prevent this page from formatting it. Note that "font2" is the linkage name of my font symbol in library.