Search code examples
htmlcssfontsfont-face

@font-face declaration in css doesn't work

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

  • 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.