How to use CSS @font-face for all browsers

I have always thought that using custom fonts via @font-face was only possible via CSS3, but actually it goes as far back as ie6 with CSS2.

How to do this:

1. To get around the compatible with different browsers it has to be in several different formats (.woff, .ttf, .svg and .eot).

• TrueType (.ttf) Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT (.eot) fonts for Internet Explorer 4+
• WOFF (.woff) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG (.svg) fonts for iPad and iPhone

2. It must be FREE for using over the internet. Here is a list of websites which do FREE fonts.

3. Implement it via CSS using the following code.

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

p {
    font-family: 'font_class_name';
    color: #FF0000;
}