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