SHARE - How to achieve cross browser font-face support

@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