Friday, August 6, 2010

Using CSS3 @font-face; it's great!

EOT(Embedded OpenType)
IE supports EOT format(Including IE9)

OTF = IE9 will support PostScript-flavored OTF CFF fonts, as do the rest of the “big five” browsers.

So, it would be a good thing to convert TTF(TrueType Format) to OTF(OpenType Format)
Online Font Converter = http://onlinefontconverter.com/ (Skip Login)


Here is how we can use it -
<style type="text/css">

@font-face{ /* for IE */
font-family:Angelina;
src:url(angelina.eot);
}
@font-face { /* for non-IE */
font-family:Angelina;
src:url(angelina.ttf) format("truetype");
/*url(http://:/) format("No-IE-404"),url(angelina.ttf) format("truetype");*/
}

body {
font-family: "Angelina", Arial, Helvetica, sans-serif;
font-size: 2em;
}

</style>

For more information about font format support in different browsers, refer these links -
Links to refer -
http://code.google.com/webfonts
http://openfontlibrary.org
http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/