This chapter covers
- How web fonts can give your page a unique feel
- Using the Google Fonts API
- Tuning font spacing (tracking and leading)
- Web font performance concerns and optimizations
- Dealing with FOUT and FOIT
You can make or break a page design with its fonts. For years, web developers had to choose from a limited set of typefaces, referred to as web safe fonts. These are font families like Arial, Helvetica, and Georgia that are commonly installed on most users’ systems. Browsers could render the page using only these system fonts, so that’s what we had to work with. We could specify a more exotic font, such as Helvetia Neue, but it would only show up for those users who happened to have it installed; other users would see a more generic fallback.
This all changed with the rise of web fonts. Web fonts use the @font-face at-rule to tell the browser where it can find and download custom fonts for use on a page; applying a custom typeface can transform an otherwise dull page. This opens a whole new world of possibilities. It also involves a lot more decisions than we used to make.