HABIB » CSS http://muhammadhabib.com Mon, 08 Mar 2010 21:29:52 +0000 en hourly 1 http://wordpress.org/?v=3.0 Finally, Using your font on the web! http://muhammadhabib.com/2009/04/embedding-your-font-on-the-web/ http://muhammadhabib.com/2009/04/embedding-your-font-on-the-web/#comments Tue, 28 Apr 2009 19:45:45 +0000 Muhammad http://muhammadhabib.com/?p=24 Continue reading →]]> The CSS @font-face rule allows you to specify & upload a font that will be downloaded to the clients machine, so the web page will be rendered exactly as you expected it to be, no matter where!

In a huge step forward for typography on the web, Mozilla finally announced that their new Firefox 3.5 (download beta) will support the @font-face rule. Opera is supposed to do the same with the next 10 version. It’s worth to know that this feature is working already on Safari 3.1 + using webkit. the ugly IE 4.0 + Supports this too, but with .eot or .ote font file extensions only.

History

Since May 1998 in the CSS 2 specification, every one was interested in being able to  embed your own fonts on any web page using @font-face rule. It would help you make sure that your visitors will see your design just as you created it. however this was not implemented on every browser, so it was later removed from the recommendation is CSS 2.1.

Disadvantages

The copyright issues! using this method means that any one can go through your code and download the font you are using. This arises a problem since there are many fonts you are not allowed to re-distribute. There should be a way of encoding font files or otherwise we will have to stick with open source fonts, which can’t be the answer!

alternatives?

On the other way, the use of sIFR (inline Flash & Javascript text replacement) was the only other reliable way I know around this, It allows you to embed your font on any browser that supports Flash and Javascript. Beside the fact that it prevent stealing, It is easy, reliable, and it validates.

Using @font-face property

Syntax:

@font-face {
  font-family: your-font-family-name;
  src: url-to-the-font-file;
}

Example Usage:

@font-face{
font-family:'Myriad Pro';
src: url('http://web-site.com/MyriadPro.otf') format('opentype');
}

h2{
font-family:'Myriad Pro', georgia;
}

HTML code:

<body>
  <h2>This is Myriad Pro font Example.</h2>
</body>
]]> http://muhammadhabib.com/2009/04/embedding-your-font-on-the-web/feed/ 1