Web Fonts

The use of CSS3 web fonts vastly increases the typography available to web designers by allowing fonts to be loaded in and displayed from across the Web, not just from the user’s computer. To achieve this, declare a web font using the @font-face property, like this:

@font-face
{
  font-family:FontName;
  src:url('FontName.otf');
}

The url function requires a value containing the path or URL of a font. On most browsers you can use either TrueType (.ttf) or OpenType (.otf) fonts, but Internet Explorer restricts you to TrueType fonts that have been converted to EOT (.eot).

To tell the browser the type of font, you can use the format function, like this (for OpenType fonts):

@font-face
{
  font-family:FontName;
  src:url('FontName.otf') format('opentype');
}

or this (for TrueType fonts):

@font-face
{
  font-family:FontName;
  src:url('FontName.ttf') format('truetype');
}

However, because Internet Explorer accepts only EOT fonts, it ignores @font-face declarations that contain the format function.

Google Web Fonts

One of the best ways to use web fonts is to load them in for free from Google’s servers. To find out more about this, check out the Google web fonts website (at http://google.com/webfonts; see Figure 19-11), where you can get access to more than 500 font families, and counting!

Figure 19-11. It’s easy to include Google’s web fonts

To show you how easy using one of these fonts is, here’s how you load one in using an HTML <link> tag:

<link href='http://fonts.googleapis.com/css?family=Lobster' />

Then to use such a font, just apply it in a CSS declaration like this:

h1 { font-family:'Lobster', arial, serif; }