CSS completed 10 years existence this year! Those who have been around for a while , earning their bread (or not) using CSS, then you might aware how we have been starving for  a good selection of fonts.  Even with the lack of fonts designers like those at  CSS Zen Garden have made use of CSS background images to replace fonts  in the pursuit of doing some justice to their designs .  We have also tried Flash/JavaScript® hacks to achieve our design goals.  By no means this is  a wrong way to get the fonts we desire into our web designs, but definitely, it is not the most desirable way.  and over years web designer, like me ,  have fully relied  on ten or so  fonts for their designs.

Recent developments in web standards and font formats make it possible to render HTML text in typefaces other than the same old default fonts.   Comes in  the “@fontface” CSS decleration.

@fontface provids a solution to link  to the actual font file and retrieve it from the web.  Using @fontface , designers can use  fonts without having to freeze the text as background images.  The implementation is very straight forward, as shown below but  as all good things have a CON part to it , NOT ALL browsers support a single “font type “.  If you are planning to use @fontface in site with requiring cross browser support, then you will have to provide sources to various font-types of the same.

1. TrueType – A format designed to look good on-screen. Recommended particularly for Windows browsers (Chrome).
2. OpenType (CFF) – This format is better for print work and does not always look good on Windows.
3. EOT – You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT’s would be considered “Lite,” since they are neither compressed nor domain-restricted.
4. SVG – This is an XML format supported by some browsers including the iPhone.
5. WOFF – This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by FireFox 3.6+.

Using @fontface

@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'), url('CalligraphyFLF.woff') format('woff'), url('CalligraphyFLF.ttf')        format('truetype'), url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}
@font-face {
  font-family: "Your typeface";
  src: url("fonts/font_filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("fonts/font_filename.woff") format("woff"),
    url("fonts/font_filename.otf") format("opentype"),
    url("fonts/font_filename.svg#font_filename") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }

As you can see from the above example, to include the chosen font typeface, one has to link to a set of fonttypes for the same typeface. Hence people refer to it as “Font Kit”.
There are Font Kits available that explicitly allows linking with the CSS @font-face property to it under End User License Agreement (EULA).

Useful WebFont Resources :

• Fonts available for @font-face embedding wiki page at http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie .  He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.
• Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.
• Font shop : offers fonts designed specifically for web use.  More than 30 of the most successful FontFont families are now available as Web FontFonts.   FontShop  also has  a detailed WebFont user guide  http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel :  Showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Font Squirrel offers an impressive quantity of type, makes it dead simple to pick one out, and handily offers “kits” – the typeface of your choice, in several formats, packaged with demo HTML & CSS that uses very current @font-face syntax. They also offer a way to make your own @font-face kits.  If the typeface you want to use has been licensed appropriately (the ones that come with your computer are not necessarily okay), the generator produces EOT, SVG, and hey! WOFF files.