views:

49

answers:

3

Does @font-face work in all browsers ?

How can i use @font-face (I want example).

+8  A: 

Check out: @font-face browser support

Webkit/Safari

* since version 3.1
* font formats:
      o TrueType/OpenType TT (.ttf)
      o OpenType PS (.otf)
      o 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:
      o TrueType/OpenType TT (.ttf)
      o OpenType PS (.otf)
      o SVG (.svg) 
* More info: http://dev.opera.com/articles/view/seven-web-fonts-showcases/ 

Internet Explorer

* since IE 4
* font formats:
      o Embedded OpenType (EOT) created by Microsoft's WEFT tool
      o 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
      o TrueType/OpenType TT (.ttf)
      o OpenType PS (.otf)
      o 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
      o TrueType/OpenType TT (.ttf)
      o OpenType PS (.otf)
      o WOFF since version 6 

Netscape

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

.

As for usage, check this out:

Sarfraz
A: 

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);
}
Blake