Does @font-face work in all browsers?

Question

Does @font-face work in all browsers ?

How can i use @font-face?

Answer 1

Check out: @font-face browser support

Webkit/Safari

• since version 3.1
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SafariMobile (iPhone/iPad): only SVG Fonts
• More info: http://webkit.org/blog/124/downloadable-fonts/
• Wiki: Code samples

Opera

• since Opera 10: http://www.opera.com/browser/ and Opera Mobile 9.7
• font formats:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• More info: http://dev.opera.com/articles/view/seven-web-fonts-showcases/

Internet Explorer

• since IE 4
• font formats:
  • Embedded OpenType (EOT) created by Microsoft's WEFT tool
  • WOFF since IE9
• More info: http://www.microsoft.com/typography/web/embedding/default.aspx
• Wiki: Code samples

Mozilla/Firefox

• since Firefox 3.5
• font formats
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (since Firefox 3.6)
• Wiki: Code samples

Google Chrome

• In Chrome 4.0 stable release. As of January 25th, 2010
• In Chrome 3.0, you could run the executable with a command line switch of: --enable-remote-fonts 1
• It was disabled by default for security review: 2 [3], [4]
• More details on chrome and @font-face here
• font formats
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF since version 6

Netscape

• since version 4, discontinued since Netscape Navigator 6
• font formats:
  • Portable Font Resource (.pfr)
• more info: http://en.wikipedia.org/wiki/TrueDoc

As for usage, check this out:

• The Potential of Web Typography:

Answer 2

Not all browsers but all of the big ones (Chrome, IE, FireFox, Opera, Safari). Sarfraz's post shows which it will work with.

Here's an example of how to use it:

@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}