HTML and CSS Reference
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.
Project files update (ch10-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Choosing a Web Safe Font Using font-family and Font
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 ac-
cessing 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 spe-
cification 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 charac-
• 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.