Search

Change Language

Tuesday, March 1, 2011

Font Embedding in HTML (compatible for all Browsers including IE6)

Font Formats
Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). While it would be nice to be able to just throw a font like this on the web and link it up, we're hit with two major limitations.
  1. Licensing, and
  2. Browser Support 

Browser Support

Which leads me into the other major issue, browser support. Font embedding with a TrueType or OpenType font only works as of Firefox 3.5, Safari 3.1, and Opera 10. (You can enable it in your copy of Chrome 2 by using a command line switch.)
Okay, that's decent already but we can do better. We can get Internet Explorer 4+, Chrome 0.3+, Opera 9+ and even a little mobile Safari action.

internet explorer only supports .eot  type

You can convert  .TTF  font to EOT Font  click here
You can convert  .OTF  font to TTF Font  click here

   script                                                                                                                                                         
<style type="text/css">
@font-face {
     font-family: "YourFont";
     src: url(font.eot);                    /* IE */
     src: local("YourFont"), url(font.ttf) format("truetype");  /* non-IE */
}
.test
    {
    font-family:YourFont;
    font-size:50px;
    }
</style>


0 comments:

Post a Comment