You can use the fonts you want NOW. Use @font-face ruthlessly.

 If you're into HTML and CSS, you know you'll be able to use whatever font you want for text as soon as CSS3 becomes a standard. No more Arial from hell. That is, when Internet Explorer 9 is released and all older versions dissapear from planet Earth, am I right? This gonna take a long, long time. Can't wait to get rid of Arial and start using other fonts?

OK, don't wait. You can use them NOW.

Now is when you say “c'mon, do you live in Neverland? IE versions below 9 don't understand CSS3”.

You don't know yet, but you're about to say “what?”.

Internet Explorer supports @font-face since version 4. Check this link:

http://www.webfonts.info/wiki/index.php?title=%40font-face_browser_support

Notice almost all browsers support @font-face now. More than 90% of your visitors can see custom fonts, and the remaining will see the text anyway, only in Arial, Times or another “web safe” font.

OK, you want it. Now, how do we use @font-face?

Step 1: Generate web ready versions of your fonts

You can use fonts on the web, but you can't use any format you want. You have to convert your fonts to a format browsers can understand. This one is very easy. I recommend you to go to Font Squirrel font-face generator:

http://www.fontsquirrel.com/fontface/generator

This is a nice utility. You upload some fonts from your own computer, and it gives you a compressed file with your fonts, ready to use on the web, along with the CSS you need to include in your site. Just follow the instructions. The compressed file Font Squirrel gives you includes an example.

Disclaimer: a font is subject to copyright like any other design. You'd better check you have legal permission to use the font you want to use.

Step 2: include the appropiate CSS in your design

Font Squirrel did the hard work for you, generating the CSS code. You just have to include it. This is done by adding just one line of code to your CSS file:

@import url(fonts/stylesheet.css);

In this example, I stored all the Font Squirrel stuff in a subfolder named “fonts”.

Step 3: Use it!

That's it, you're ready to use it. This is how it's done.

Imagine we want to use a font named “Kartofel” for our Heading 1 titles. Font Squirrel will give us this CSS:

@font-face {
font-family: 'Kartofel';
src: url('kartofel.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

The font family name is “Kartofel”, so, to use it in our site, we need the following CSS code:

h1 {font-family: Kartofel, Arial, Helvetica, sans-serif;}

And you're done. Please notice Font Squirrel specifies the font weight and font style. More about this in:

http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/

Update: using @font-face has its flaws too. Read this article:

http://paulirish.com/2010/font-face-gotchas/