@font-face declaration in css doesn't work

Question

I'm helping my sister convert a website that somebody did for her in flash into html.

They use fancy fonts in the flash that I am trying to define in a css file through @font-face. I tried opening the page in firefox, IE and chrome, but nowhere do I see the proper font.

The declaration that I am using is:

@font-face {
  font-family: "VAG Rounded";
  src: url("http://judith.huinink.net/chilax/VAGROUNL.OTF");
}

http://judith.huinink.net/chilax/index.htm contains the html.

http://judith.huinink.net/chilax/chilax.css contains the full css.

I checked that I can download the font file, but it simply doesn't use the font when I open the page in a browser. I must be overlooking something. Does anybody have any suggestions?

Answer 1

http://www.css3.info/preview/web-fonts-with-font-face/

Answer 2

Almost no browsers support @font-face: When can I use...

Answer 3

Update

In the last year, browser support for fonts has improved rather dramatically. I'd suggest reading Tim Brown's excellent article on the subject, which describes in detail how to get web fonts working in most modern browsers.

Original answer

In realistic terms, @font-face is completely unusable right now. Only two browsers support it — Internet Explorer for Windows, version 5 or better, and Safari 3.1.

Worse, IE and Safari do not support the same font formats. IE supports only EOT, while Safari instead supports the more common TrueType (.ttf) and OpenType (.otf) formats.

Answer 4

Check out the ever popular sIFR or with no flash dependency, typeface.js

Answer 5

How to use @font-face in all browsers that support it: at Jon Tangerine's blog

ttf2eot is a nice font converter for Unix and Windows so you don't have to use the horrible old Microsoft WEFT. It converts the whole font, not just some characters.

Here's a javascript to use with sIFR that disables sIFR for @font-face enabled browsers.

Flash needs to die, so here's another alternative to sIFR: facelift. It's a serverside script that generates images.

The problem with afaik all sIFR replacements is that selecting and copying text doesn't really work -- you either don't see the selection, or it's impossible to select less than a word or line. There's also Cufón which uses <canvas>, so it only works on newer browsers, most of which have @font-face anyway.

Do the right thing, use the state-of-the-art technology now: @font-face with TTF or OTF, and fallbacks for IE and old browsers. Preferably keep your HTML clean and implement those fallbacks in separate javascript and CSS files. For IE you might need to use "conditional comments" as explained in my first link above. For browsers with javascript disabled, always specify a list of replacement fonts with the web-safe fonts at the end.

Answer 6

font-face goes mainstream

As of January 2010 all major new browsers support font-face

• Safari 3.1
• IE - all versions
• Firefox 3.6
• Chrome 4
• Opera 10

See http://webfonts.info/wiki/index.php?title=@font-face_browser_support