O'Reilly logo

Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition by Robin Nixon

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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!

It’s easy to include Google’s web fonts
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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required