SPICING UP YOUR FONTS AND TEXT - Practical CSS3: Develop and Design - page 72

USING WEB FONTS

For years, the lack of “web-safe fonts” available for web designers to use on their
sites was a complete nightmare. Fonts like Times New Roman, Arial, Courier New,
and Georgia can go quite a long way, but for custom headings or logos, you had to
resort to tricky techniques like image replacement or even siFR or Cufon (which
replaced text using Flash movies or SVG containing custom fonts).
Like a ray of sunshine, CSS2.1 introduced Web Fonts. Then it was dropped due
to lack of agreement from browser vendors. Then it was reintroduced in the Web
Fonts module, which was later subsumed into the Fonts module (www.w3.org/TR/
css3-fonts), and lo, there was much rejoicing. This module contains functionality
that allows you to specify custom font files to download along with your website,
and then use them in the same way as any other font. You first need to specify the
font to download using a @font-face block, like so:

@font-face {
: ;
: ;
: ;
: ;
}

Inside the curly braces, you can include:

A font-family declaration to specify the name of your font, which is
how you will refer to it in your CSS. You can pretty much use any term
you like here, as long as you use it consistently throughout your CSS. Use
font-family: 'monkey butt'; if you really think your boss or client will
be cool with it.

A src declaration to point to the actual font(s) you want to use. This can
point to a single font file or a comma-delimited list of as many different fonts
as you want. The browser will go through the list until it can find a format
it recognizes. The fonts can be local, such as local(“foo”), or external
downloadable fonts, such as url( http://example.com/path/to/foo.ttf) .

A font-weight declaration to specify usage of a bold version of the font if
it's available. If the font file you are pointing to contains a bold version, it