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

They dont, your best bet is to do something like the following:

<h1 id="MyHeading">my heading</h1>

h1#MyHeading {
    text-indent: -1000px;
    width: 200px;
    height: 50px;
    background-image: url(myheading.jpg);
}

This aricle explains some other alternatives.

Edit: I don't know why this has been downvoted. Bottom line is there is no accessible, seo friendly way to do what you want which is supported by all browsers. If you want to alienate your users then go for one of the other solutions. Otherwise, ill keep my users happy with my -1.

Answer 3

web kit also does

quirks mode has for a long time been a good resource for compatibility tables for js and css

Answer 4

I recall Safari folks proudly writing a blog-post, that Webkit could download ttf fonts and use them automatically, when they're in the page source. IE has supported downloading bitmap fonts forever.

Answer 5

@nezroy, here is an update:

[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 6

http://nickcowie.com/2008/font-face/

Answer 7

If you're not affraid of some Java script this post could help you out: http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/.

I haven't used it myself, but it promisses to suport any font on any browser...

Answer 8

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

Answer 9

OK, so I think the best way to do this is as follows....

• Use a ttf font in the first instance
• Fall back on an OET font for IE
• Fall back on Arial, sans-serif for browsers that don't support embedded fonts at all.

Great, now just got to find some EOT fonts.

Answer 10

Wrote about it over here:

http://interactivity.ifactory.com/2010/04/font-face/

Basically 95% of modern browsers now support it:

IE6+, FF 3.5+, Chrome, Safari 3.1+, Opera.