How to fix @font-face glitches in Firefox 3.5

Question

In existing code I had CSS @font-face declarations for .EOT embedded fonts that worked flawlessly actually, in internet explorer. So now I read that Firefox does embedded now too, in 3.5, except it embeds .ttf fonts directly. So I altered the @font-face declaration for firefox and gave it a shot:

@font-face {
  font-family: FontX;
  src: url("FontX.eot");   //previous decl.
  src: local("FontX"), url("FontX.ttf") format("truetype");
}

It works - but hardly flawlessly.

First, the italic and bold don't show up on the page, though they did previously with the .EOT font.

Secondly and more disturbing is the following behavior:

Firefox flashes the default font for a half second before displaying the embedded ttf font!

This looks really really dumb.

As far as this second problem, the reason I'm hoping there might be a work around is that with Cufon embedded fonts, there is the exact same problem. However, they provide the Cufon.now() JS function you call right before the closing </body> tag and that solves the problem for them. SHould probably have already taken a look at the JS code for that function but am hardly an expert at any of this.

Also that same default font flashing is not present in IE or Safari.

Answer 1

For italic, you need to add

@font-face {
  font-family: ...;
  src: url(...);
  font-style: italic;
}

Answer 2

If you are only using non-standard fonts in headers and small amounts of text, I'd recommend using sIFR. This little JavaScript/Flash library works by replacing select elements with a small light-weight flash object, which displays your fonts the same across all browsers... You can even select the fonts sIFR generates, just as you would any other text on your webpage.

Take a look at the example page.