Changing the Font - CSS3 Foundations - page 174

• Step 3 provides the code you must use to have your chosen fonts working on your web page. You're
presented with three different methods of adding the fonts to a page. For this example, use the Standard
method.
5. Copy the HTML under the Standard tab:
<link
href='http://fonts.googleapis.com/css?family=Average|Belgrano'
rel='stylesheet' type='text/css'>
6. In index.html, paste this HTML above the link to the styles.css stylesheet, like so:
<link
href='http://fonts.googleapis.com/css?family=Average|Belgrano'
rel='stylesheet' type='text/css'>
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” />
7. Save index.html.
• If you're curious about what this step is doing, you can actually navigate to the external stylesheet by vis-
iting fonts.googleapis.com/css?family=Average|Belgrano , and as you will see,
Google uses the @font-face rule to tell the browser you will be using the Average and Belgrano
fonts:
@font-face {
font-family: 'Belgrano';
font-style: normal;
font-weight: 400;
src: local('Belgrano'), local('Belgrano-Regular'),
url('http://themes.googleusercontent.com/static/fonts/belgrano/v3/
9nICvxZmkDv7_ninPVYjoXYhjbSpvc47ee6xR_80Hnw.woff')
format('woff');
}
@font-face {
font-family: 'Average';
font-style: normal;
font-weight: 400;
src: local('Average'), local('Average-Regular'),
url('http://themes.googleusercontent.com/static/fonts/average/v1/
4iG3r29DvHyol7Yxf3Wz2wLUuEpTyoUstqEm5AMlJo4.woff')
format('woff');
}
• Note that Google Web Fonts doesn't use two src declarations as you did to get the font working in ver-
sions of Internet Explorer below version 9. Does this matter? Because the fonts Average and Belgrano
aren't displayed for these older versions of Internet Explorer (unless users have them installed on their
device), the browser moves down the font stack you created to apply the Georgia font instead. Because
the font is such a close match, it doesn't particularly matter.
The final step explains how to make use of these fonts by adding a font-family declaration to the
stylesheet. You gave the body rule set a font-family declaration earlier, so the Average font is already
applied. Now apply the Belgrano font.
8. In styles.css, find the h1, h2, h3, h4 rule set and add the following:
font-family: Belgrano, Georgia, serif;