Changing the Font - CSS3 Foundations - page 172

2. In the body rule set, modify the font-family declaration:
font-family: Average, Georgia, serif;
3. Save styles.css.
When a browser reads the Average font as the first font in the list, it renders the text in that font. However, if that
font isn't available (you've made a good job of making sure it is via the @font-face rule, so it should be), the
browser moves onto the next font Georgia and tries to render the text using that font.
Along with the font-family and src that are included in a @font-face rule set, you can also give the font
default styles using properties such as font-size and font-weight , which are covered in the next chapter.
To specify multiple fonts per stylesheet, you simply add another @font-face rule. The Cool Shoes & Socks page
uses two different fonts using the @font-face rule, but instead of getting the browser to download these fonts
from the server, you actually use a third-party font service instead.
Font Licenses and Third-Party Font Services
Although @font-face offers a way to use fonts that may not be installed on a user's computer, that doesn't mean
you can start using every font you have on your own computer. When you use @font-face , a user's computer has
to download a copy of that font, meaning you are distributing that font. Why does that distinction matter? Often fonts
aren't licensed to allow for distribution. By distributing a font, you are essentially giving it away free. You should be
cautious when using @font-face and always make sure a font's license allows for distribution.
You can find the license information for the Average and Belgrano fonts in text files distributed with the CSS3
Foundations project files.
A growing number of third-party services offer fonts to be used on web pages, some free and some paid. Some of
these services use the @font-face technique, whereas others use JavaScript to display a font in a way that means
a user doesn't have to download it—working around the licensing issue somewhat.
The Average font was downloaded free from Google Web Fonts ( www.google.com/webfonts ), which is be-
coming one of the web's most popular font services. What's more, all its fonts are completely free and licensed for
web page usage, meaning it's one of if not the easiest and most carefree font delivery services.
Google Web Fonts
Although Google Web Fonts makes all its fonts available to download free, you're best to use the stylesheet it
provides. This stylesheet references the font on its web server, meaning you don't need to save the font on your own
server. In doing this, you save yourself some bandwidth usage, and fonts tend to load faster when hosted by Google.
Go ahead and remove the @font-face rule from the Cool Shoes & Socks stylesheet so Google can host the font
instead:
1. In styles.css, find the @font-face rule set and delete it (keep the font-family declaration in the
body rule set, however).