Which browsers support font embedding

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.

Answer 2

Safari 3.1 (and Webkit Nightly builds), Firefox 3.1, and Opera 10 support @font-face embedding for .ttf (TrueType fonts) and .otf (OpenType fonts). Internet Explorer version 5+ supports @font-face embedding for .eot (a proprietary embedded open type format) only.

Microsoft makes a horrible little font conversion tool called WEFT (Windows only) that you can use to convert most font formats to .eot.

CSS3.info has a nice, brief tutorial on how to use the @font-face rule. The site is a great resource for playing with CSS3 tricks (or in this case CSS2 proposed tricks).

There is a more thorough article on this subject on A List Apart.

Make sure any fonts you embed in a web page state that it is okay to do so in their licenses, as the font will live on your web server in a public directory, free for anyone to download. This use isn't always explicitly covered in the license, but you can usually contact the designer directly to ask. They usually let you use a font as long as you include a link to their page. I don't know for sure if Franklin Gothic Medium is approved for this use, but I doubt that it is.

Here are some a resources for free fonts. If you do enough digging, you can usually find a similar face that will work for you:

• Ray Larabie
• Dieter Steffmann
• Jos Buivenga