Using Web Fonts

In this lesson, we will learn how to use web fonts.

We'll cover the following

As you learned earlier, the font-family property can be used to set the font type to be used by an HTML tag. However, there’s an issue with this property: you are limited to fonts likely to be installed on the devices of your visitors.

In many cases, especially if you need a unique design for a brand, it is a real and annoying limitation. With using the CSS web fonts feature, you can instruct the browser to download the font from a web server, and immediately without installation use it to display text on the web page.

The web font technology is designed to support a number of font formats, but as of this writing, only the WOFF (Web Open Font Format), a kind of compressed version of Open Type and True Type font formats, is a W3C recommendation. Nonetheless, major browsers support the OTF and TTF font types as well.

There are a number of web sites that allow you to download WOFF (and other types of web fonts), such as Google Web Fonts,, Font Squirrel, The Open Font Library, and many others.

📜NOTE: Be sure to check the license of the selected font to avoid any legal issues. To add a web font to your style sheet, use the @font-face at rule, as shown in Listing 10-4. This project utilizes web font files that can be found in the Exercise-10-05/fonts folder stored at the backend.

Listing 10-4: Using web fonts

Get hands-on with 1200+ tech skills courses.