An example of @font-face web-fonts from CSS3

Web-fonts, for those who don’t know, are a method of using a custom font in your web page(s). Unlike the more traditional method of specifying the font using the CSS “font-family” (or the shorthand “font”) which relies on the user having the relevant font installed on their computer, web-fonts allow the developer to use fonts which reside on the internet.

Microsoft actually introduced a limited version of web-fonts as far back as Internet Explorer 4 but it’s taken until now to gain a (almost) consensus on how web-fonts should be implemented. Web-fonts are now part of the CSS3 specifcation in the font module and as such have now been implemented at least partially in several major, current browsers such as Firefox 3.5+, Opera 10, Safari 3.1+, Google Chrome 4+ and probably some more (see the web-fonts browser compatibility table on webfonts.info for more details) so it’s high time we learned how to use them!

The method is very simple indeed. In your Stylesheet, you must first define the web-font(s) you wish to use, with one @font-face class per font file e.g.:

@font-face
{
    font-family:"Caviar dreams";
    src:url('CaviarDreams.ttf');
}

So we are declaring the name/label by which we want to reference the font first using “font-family”, then defining the font file itself with “src” which can be a relative or absolute URL.

Then, to actually use the font to style an element in your page(s), you’d use exactly the same CSS rules as for any other font e.g.:

div.webfont_div
{
    font-family:"Caviar dreams";
}

Note that the quotes around the font-family value simply allow you to have one or more spaces in the font-family name/label.

I have put together a simple example of web-fonts which should help to explain a little further. Please view the source files for details.