views:

1522

answers:

3

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.

A: 

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.

roosteronacid
For small pieces of text, I can verify that Cufon fonts work much better. Well actually, their interface isn't anywhere near as convoluted as siFR, and for small pieces of text they work great with zero delay (if you use their now() command). I have read there is significan delay with siFR (and also its flash - Cufon isn't flash.) For large pieces of multiline text I ran into some problems with Cufon which are probably solvable, as they provide a lot of documentation.
Aye. Cufon seems easier to use. I'd personally choose sIFR over Cufon because of the option to select text in sIFR. And combining sIFR with jQuery makes selecting stuff to sIFR-enable easier. Personal taste, I guess :)
roosteronacid
A: 

For italic, you need to add

@font-face {
  font-family: ...;
  src: url(...);
  font-style: italic;
}
Ms2ger
THat didn't cause Firefox to display the Italic. I just tried it.
A: 

It's weird becauseI'm using @font-face with a font without bold nor italic, and Firefox (3.5.4) is faking bold and italic whereas Safari doesn't... Is there a way to make Safari force italic and bold?

latsami