54 Chapter 5
Most FaaS providers are commercial, allowing a limited set of fonts for
free but charging a monthly or annual fee for the majority. The two big-
gest players in this category are probably Fontdeck (http://fontdeck.com/)
and Typekit (https://typekit.com/). Other providers supply only free fonts—
Google Fonts (http://www.google.com/fonts/) being a notable example of this.
Each provider has its own way of including the licensed fonts on your site,
usually through the inclusion of an external CSS or JS file, or both.A Real-World Web Fonts Example
Having discussed the intricacies and niceties of fonts, licensing, and multi-
ple syntaxes, let’s see a real-world example of @font-face in action. I’ll use an
example that compares text displayed in a standard sans-serif font (Arial)
to the same text displayed in three different font families (all from Font
Squirrel).
Here’s the CSS for this example. Bear in mind that, for the sake of clar-
ity, I’ve simplified this snippet to show only a single font format (WOFF),
although the accompanying example file has the full code:@font-face {
font-family: 'CartoonistHand';
src: url('CartoonistHand.woff') format('woff');
}
@font-face {
font-family: 'CartoonistHand';
font-style: italic;
src: url('CartoonistHand-Italic.woff') format('woff');
}
@font-face {
font-family: 'CartoonistHand';
font-weight: bold;
src: url('CartoonistHand-Bold.woff') format('woff');
}
@font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive.woff') format('woff');
}
@font-face {
font-family: 'AirstreamRegular';
src: url('Airstream.woff') format('woff');
}
.font-face h1 { font-family: ChunkFiveRegular, sans-serif; }
.font-face h2 { font-family: AirstreamRegular, cursive; }
.font-face p { font-family: CartoonistHand, sans-serif; }