HTML5 Digital Classroom

Lesson 12: Working with Web Fonts

Web fonts offer a way to enhance your page by embedding custom fonts, even if visitors to your site do not have the font on their system. In this lesson, you will explore two approaches; using the @font-face property and choosing fonts from a web-based font library service.

What you’ll learn in this lesson:

• • Understanding web fonts
• • Using @font-face to specify a web font
• • Using a web font service to generate multiple fonts
• • Using a font from Google Web Fonts
• • Using a font from Adobe Edge Web Fonts

Starting up

You will work with several files from the HTML5_12lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

Working with web fonts

As noted in Lesson 3, Formatting Text with CSS, currently there are a few cross-platform compatible fonts that designers can use with the certainty that users have them installed on their system. Over the years designers have looked for alternatives and workarounds to this limitation. These workarounds ranged from using decorative fonts saved in images to font-replacement technologies such as Cufon, sIFR, FLIR and @font-face.

CSS3 uses a technique called @font-face supported by designers and by the companies that make and license fonts. @font-face lets ...