Does @font-face work in all browsers ?
How can i use @font-face (I want example).
Does @font-face work in all browsers ?
How can i use @font-face (I want example).
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:
Google results for font-face:
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);
}