CSS3 Foundations

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.

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