CSS3 @font-face Rule

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
Web fonts allow using fonts that are not installed on the user's computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined within the CSS3 @font-face rule.
Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

SYNTAX:
@font-face
{
font-properties
}

WEB FONT GENERATOR SITE
http://www.fontsquirrel.com

STEPS
Use any font that you like on your computer (or download a font from this site, or any other site)
1. Click on the WEBFONT GENERATOR link
2. Click on Add Fonts dark gray button at the left, choose the font(s) and click Open button (check the agreement). You can leave Optimal option
3. Click Dounload your kit blue button at the right
4. Click Save File in the dialog box
5. Unzip the file. You will find there font files and a CSS documents with the ready code to use
6. Put these files into the folder with your site; copy the code and put it into your CSS part

Example of how approximately a code looks:

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

7. Define a name for the font (e.g. myFirstFont) in CSS part

. myFirstFont{
font-family: 'azbuka04regular';
}

8. Use this rule in HTML document:
<span style=”class="myFirstFont"> Text </span>