Question

I’ve been reading about the @font-face rule and trying to work out if it’s worth using it in a project to render ‘franklin gothic medium’ for title instead of something like sIfr. I figured that for browsers that don’t support it I could make it fall back on Arial.

The thing is that I’m having trouble getting a definitive answer about which browsers support embedding fonts in this way.

So far I’ve worked out the IE does, but doesn’t support .ttf files. Other browsers I’m not sure.

If anyone could point me towards some kinf of compatibility chart that would be great.

Jon

Answer 1

This article discusses browser support about mid-way in. Here’s the most relevant bit, though the whole thing is worth a read:

CSS3 (and even drafts of CSS2 in 1997 and 1998) have long promised a standardized way of font embedding, using the @font-face rule. What many folks probably don’t know is that this rule is already supported in Opera 9.5, shipping versions of Safari for the Mac, Windows and iPhone OS, and is promised for Firefox 3.1., and well as IE6 and later.

Sadly, while support for @font-face was hinted at for Opera 9.5 and Firefox 3.1 (see my comments at #4 below) this is in fact not the case sadly.

There is a catch though. All the browsers other than IE support linking to TrueType font files. Microsoft supports only the proprietary EOT file format.

EDIT: Including this update from Ric Tokyo‘s answer.

[Update 2] Opera 10, and Firefox 3.1 now support linking to TrueType and OpenType (but not EOT) in currently shipping alphas or betas.