chapter ten

Changing the Font

Fonts are an important part of the design aesthetic. Although text—whether on the web or in print—conveys a particular message, the choice of font can greatly reinforce that message, representing voice, authority, friendliness, competence, and so on.

Until recently, the range of fonts available for web design was rather lacking. Although a quick search on the web shows hundreds of thousands of fonts are available to download and use, in reality, not every device has the font you want to use for your web page. In fact, only a handful of fonts that you can use are shared across the majority of devices. These fonts are known as “web safe” because you can use them safe in the knowledge that almost everyone can see them.

When features of CSS3 were first implemented into browsers, however, the technology became available to allow for displaying a font that wasn’t installed on a computer. This means you can now choose from a much larger selection of fonts for your web page.

In this chapter, you learn how to apply different fonts to the Cool Shoes & Socks page, using third-party services such as Google Web Fonts to access a wider range of fonts.

Choosing a Web Safe Font Using font-family and Font Stacks

Web safe fonts are those fonts that are likely to be installed on the majority of devices accessing the web. Between computers with varying operating systems, you can find around 50 web safe fonts, but with mobile devices now accessing the web too, the number of web safe fonts drops to just a handful. Thankfully, to work around this number, you can specify which font you would ideally like a user to see a web page presented in and then add more fonts after that in a comma-separated list—known as a font stack—to act as fallbacks in case your chosen font is not present.

If a device has no fonts whatsoever—which is unlikely unless somebody decided to just delete them all—the CSS specification defines five generic font names to act as fallbacks: serif, sans-serif, cursive, fantasy, and monospace, as shown in Figure 10-1. These fallbacks don’t necessarily represent a specific font but should express particular characteristics.

• Serif—Characters tend to have finishing strokes, flared or tapering ends, or actual serifed endings.

• Sans-serif—Characters tend to have stroke endings that are plain.

• Cursive—Characters have either joining strokes or other cursive characteristics, resulting in a handwritten look.

• Fantasy—Characters are primarily decorative but still contain representations of characters.

• Monospace—All characters have the same fixed width, similar to a manual typewriter and often used to set samples of computer code.

Figure 10-1 The five generic fonts when viewed in Google Chrome.

font-family

The font-family property enables you to specify a font or list of fonts to be applied to an element.

1. In styles.css, find the rule set for body and add the following:

font-family: serif;

The initial value for font-family is dependent on the browser, but for all desktop browsers, each has chosen serif as its default. As a result, you don’t yet see a difference to the page, but nonetheless you have specified a fallback font for the entire page, which is always wise. Wise…but kind of boring, right? So you can change this font declaration into a font stack.

2. Change the font-family declaration to the following:

font-family: Georgia, serif;

3. Save styles.css.

As shown in Figure 10-2, the Cool Shoes & Socks page is now entirely set in Georgia. When a browser comes to render this declaration, it first tries to set the font as Georgia, but if the device doesn’t have it, the browser then falls back to serif. This is known as a font stack. A font stack can consist of a long list of fonts, starting with your most desired, working down through fonts that are closer to being web safe, finally reaching one of the generic fonts that best represents the characteristics of your desired font. Georgia, however, is web safe, so it is almost certainly installed on all devices.

Of course, web safe fonts have been used time and time again, so try using the CSS3 @font-face rule to use a font that can be displayed without users initially having it on their device.

Figure 10-2 The Cool Shoes & Socks page with a font-family of Georgia.

Applying Fonts Using @font-face

@font-face is a rule set of its own rather than a property, which allows you to specify a font to be downloaded from a particular source. Although @font-face appears only in the CSS3 Fonts module (www.w3.org/TR/css3-fonts/), it was actually a feature first implemented by Microsoft in Internet Explorer 4—yes, another one of those situations in which Microsoft did as it pleased. This is good news, though; it means every browser in use today supports @font-face, but it isn’t without its caveats.

Fonts come in the following formats:

• .ttf (TrueType Font)

• .otf (OpenType Font)

• .eot (Embedded OpenType)

• .woff (Web Open Font Format)

• .svg (Scalable Vector Graphics)

When Internet Explorer 4 implemented @font-face, it supported only the .eot format, and the situation remained that way up to Internet Explorer 8. Because the .eot format is proprietary, belonging to Microsoft, no other browser supports it. The only format to be supported by all other browsers (including Internet Explorer 9) is .woff. So, when using @font-face, you should aim to have .eot and .woff formats of the same font.

If you have only one font type, numerous tools available online take that one format and convert it into the rest for you. My personal recommendation is Font Squirrel’s @font-face Generator, found at www.fontsquirrel.com/fontface/generator.

The Cool Shoes & Socks project files contain an .eot and .woff font called Average. Tell the browser to download this font for later use:

1. In styles.css, above the body rule set, add the following:

@font-face {

    font-family: Average;

    src: url(“../fonts/Average-Regular.eot”);

    src: local(“Average”),

        url(“../fonts/Average-Regular.woff”);

}

Because this rule set doesn’t have a selector, it only lets the browser know the name of the font and where it is located, via the src declaration. Due to Internet Explorer 6, 7, and 8 supporting only .eot font formats; you specify two src properties. Internet Explorer 6, 7, and 8 read and apply the first property, but because they don’t understand the syntax of the second, they ignore it.

The second src property consists of two functions: local() and url(). By placing the local() function first, you tell the browser (those which aren’t Internet Explorer versions below 9) to check to see whether the device already has the font saved locally, and if not, to download it from the source specified in the url().

At a minimum, the @font-face rule must include font-family and src declarations; otherwise, it is ignored.

Now to use this font, do the following:

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.

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 becoming 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).

2. In your web browser, navigate to Google Web Fonts (www.google.com/webfonts) and search for “Average.” When the Average font is displayed, as in Figure 10-3, click Add to Collection.

Figure 10-3 The Average font selected on the Google Web Fonts page.

The blue box at the bottom of the page shows the fonts you have in your collection. Google Web Fonts allows you to add as many fonts to your page as you like, so find another font, too.

3. Search for the font “Belgrano,” and when it appears, click Add to Collection.

4. Now you have two fonts, click Use in the blue collection box.

• Step 1 of this page shows that these fonts have a “Normal 400” style. This means the fonts come in only a normal style, nonbold, nonitalic, and so on. However, when learning to change the styles of fonts in the next chapter, you see that the browser can change a font’s style without there being a specific variant of that font. In this step, you also see a speed dial that shows these fonts will be quick to load. Great! If a font comes with more styles and you know you’re never going to use them, you can uncheck those styles to speed up the delivery of fonts.

• Step 2 shows the character set to be used. More often that not, you will use only the Latin set, so you don’t need to change anything in this step.

• 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 visiting 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 versions 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-familydeclaration 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;

9. Save styles.css.

Now, as illustrated in Figure 10-4, all the text on the Cool Shoes & Socks page is styled in the Average font, except for the titles that are styled in Belgrano—all generously hosted and provided free by Google Web Fonts.

Figure 10-4 The Cool Shoes & Socks page styled with the Average and Belgrano fonts.

Other Font Services

Of course, other font services are available, too.

• www.fontdeck.com—Fontdeck has a wide selection of fonts and a great pricing structure that means you pay only for the exact font you need. Prices per font start at $2.50 per year, which includes 1 million page views a month. You can also try every font free for as long as you like.

• www.typekit.com—Typekit also has a great selection of fonts. Pricing is based on subscription plans that offer varying features. The free plan offers 25,000 page views per month with access to fonts in the Trial Library. The personal plan offers 50,000 page views per month with access to the Personal Library at a cost of $24.99 a year. A portfolio plan offers 100,000 page views with access to the entire library of fonts, at a cost of $49.99 a year. Typekit also offers performance and business plans if you need more than 1 million page views per month.

You may also like to try the following:

• Font Squirrel—www.fontsquirrel.com/

• Webtype—www.webtype.com/

• FontsLive—www.fontslive.com/

• TypeFront—www.typefront.com/

Summary

In this chapter, you added fonts to the Cool Shoes & Socks page that users may not necessarily have installed on their device. If you use the @font-face rule along with the Google Web Font service, the user can still see those fonts.

Now that you’ve added some fonts to the page, in the next chapter, you learn to style those fonts to give certain text weight and emphasis.