Cross-browser fonts (aka @font-face)

Recently I have experimented with web fonts to figure out the best one and take it as standard for my company. There are not much predefined web fonts at all. "Verdana" was too wide for me, "Arial" was too narrow, "Tahoma" and "Trebuchet MS" were different displayed dependent on browser, ... I ended up with a cross browser font face implementation. There are many wonderful fonts which can be added to web applications by using of @font-face. @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. @font-face is supported by all browsers, even old Internet Explorer. There are dozens of Internet ressources with quality and amazing fonts. For instance, go to the Font Squirrel. That's the best resource for free, high-quality, commercial-use fonts. Choose a font and download a @font-face kit for it (a zip file). You need four types of font files. Each @font-face kit come with:

1. EOT fonts for Internet Explorer 4+
2. TrueType fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
3. WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
4. SVG fonts for iPad and iPhone

After downloading unpack the zip file somewhere in your web application. You will find files with extensions .eot, .ttf, .woff, .svg and a stylesheet.css. stylesheet.css has ready-to-use definitions - examples how to add @font-face for the desired font to your web application. Assume, you have choosen a font named as "BPreplayRegular". @font-face will look like then as follows

@font-face {
    font-family: 'BPreplayRegular';
    src: url('BPreplay-webfont.eot');
    src: url('BPreplay-webfont.eot?#iefix') format('embedded-opentype'),
         url('BPreplay-webfont.woff') format('woff'),
         url('BPreplay-webfont.ttf') format('truetype'),
         url('BPreplay-webfont.svg#BPreplayRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

To match your directory structure you should set right paths to your four files in "url", of course. After that you are able to apply the font to any HTML element, e.g.

body {
    font-family: 'BPreplayRegular', Verdana, sans-serif;
    padding: 0px;
    margin:  0px;
}

Such web fonts work fine and look identical in IE6-IE9, Firefox, Chrome, Safari, Opera. The good news - there are hundreds of free fonts which leave nothing to be desired.