Web fonts can be used with CSS on any textual content of a web page, but I think that they make the difference mainly on headings. This is due to an accessibility reason: if you use a web font on a large section of text, you may actually annoy users with sight problems, not to mention users with cognitive disabilities who can be easily distracted by your design choices. Instead, headings are generally very short and for that reason they're just perfect to test some fancy web fonts to create interesting typographical effects. In this post we'll use Google Web Fonts, because they're easy to use and do not affect too much the overall performance of your web pages.
Including a web font
Google Web Fonts can be easily included in your pages through the link element, just as any other style sheet:
<head> <link href='http://fonts.googleapis.com/css?family=Six+Caps&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Limelight&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Lobster&v1' rel='stylesheet' type='text/css' /> </head>
Here we're using four web fonts, namely Six Caps, Limelight, Droid Serif (with all of its variants) and Lobster. Google explains in full details how to use its fonts in each description page of the font you want to use. Bear in mind that your web fonts includes must come before the main styles (or style sheets) of your pages or they won't work.
Using a web font
Once included your web fonts, you have only to write a simple CSS rule using the font-related CSS properties:
h2.six-caps {
font: 5em 'Six Caps', sans-serif;
margin: 0;
color: #323232;
text-transform: capitalize;
letter-spacing: 0.1em;
}
h2.limelight {
font: 2.5em 'Limelight', sans-serif;
margin: 0;
color: #d40;
}
h2.droid-serif {
font: italic 3em 'Droid Serif', serif;
color: #666;
margin: 0;
}
h2.lobster {
font: 3em 'Lobster', cursive;
color: #004bb2;
margin: 0;
}
Only remember that if your font doesn't feature all the font variants (italic, bold, etc.), properties such as font-style and font-weight will not work because of the lack of such variants in the font definition. You can see the demo below.