@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?

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

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

Solution 5

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

View more solutions