Wednesday, May 13, 2009

Embedding(import) your own fonts on the web

Embedding your own fonts on the web

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!

A huge step forward for typography on the web. Mozilla finally announced that its new Firefox 3.5 (download beta) will support the @font-face CSS 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. Internet Explorer (4.0+) Supports this too, but with .eot or .ote font file extensions only.

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.

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!

On the other way, the use of sIFR (In-line 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

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

font-family:'Myriad Pro';
src: url('') format('opentype');
font-family:'Myriad Pro', georgia;

HTML code:
<h2>This is Myriad Pro font Example.</h2>

powered by:

No comments: