@font-face is nothing new. Originally proposed for CSS2 and originally implemented in Internet Explorer since version 5. Font-face allows for 
specific fonts to be embedded on a website without having to rely on the remote user having them installed on their system.
Of course, as developers we cant just use any font, we have to carefully consider what fonts can be legally used, as this method of displaying a remote font as part of a web page allows the font file itself to be freely accessed and downloaded which the licence of the font may not allow.
With the recent releases of Firefox 3.5, Opera 10 and Safari 3.1 we are starting to see an increase in the number of websites using webfonts.
Ensuring that webfonts work in every browser can be time consuming. A few things to note are;
- To use web fonts each style/type of the font family must me declared at the very top of your stylesheet.
- Also, the @font-face declaration wont work if the stylesheet containing it is referenced via an @import.
A larger list of @font-face Gotchas can be found here.
The Example CSS:
@font-face {
font-family: “a-font”;
src: url(“type/a-font.eot”);
src: local(“?”),
url(“type/a-fontfilename.woff”) format(“woff”),
url(“type/a-fontfilename.otf”) format(“opentype”),
url(“type/a-fontfilename.svg#filename”) format(“svg”);
}
@font-face {
font-family: “a-italic-font”;
src: url(“type/a-italic-font.eot”);
src: local(“?”),
url(“type/a-italic-font.woff”) format(“woff”),
url(“type/a-italic-font.otf”) format(“opentype”),
url(“type/a-italic-font.svg#filename-ital”) format(“svg”);
}
h2 { font-family: “a-font”, Georgia, serif; }
h2 em { font-family: “a-italic-font”, Georgia, serif; }
The quickest and easiest way to implement webfonts is to use a pre-packaged @font-face kit which will contain the css and multiple font formats you will require, as well as a working html example. Head over to font squirrel where the font face generator will do all the hard work for you. You can use one of their prepackaged font kits or upload your own, all you need to do is ensure that it is LEGAL.
