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>
Hi, interest post. I’ll write you later about few questions!