@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 until iOS 4.1
+ TrueType/OpenType since iOS 4.2
* More info: http://webkit.org/blog/124/downloadable-fonts/
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
Mozilla/Firefox
* since Firefox 3.5
* font formats
o TrueType/OpenType TT (.ttf)
o OpenType PS (.otf)
o WOFF (since Firefox 3.6)
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-font
* 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
For more detail you can see here
http://webfonts.info/wiki/index.php?title=@font-face_browser_support
So base on that information we need some font type for @font-face to work
* eot for ie
* ttf or otf
* woff (optional)
* svg for mobile device
on my css
@font-face {
font-family: 'Arial';
src: url('../fonts/arial-webfont.eot');
src: local('☺'),
url('../fonts/arial-webfont.woff') format('woff'),
url('../fonts/arial-webfont.ttf') format('truetype'),
url('../fonts/arial-webfont.svg#webfontOVtGScWg') format('svg');
font-weight: normal;
font-style: normal;
}
to generate eot type we need WEFT http://www.microsoft.com/typography/WEFT.mspx
for simpleness we can generate it using font-face generator by squirrel.com
http://www.fontsquirrel.com/fontface/generator
for more detail you can see here
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://randsco.com/index.php/2009/07/04/p680