Using Web Fonts

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, Fontex.org, 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 the Listing below. This project utilizes web font files that can be found in the Exercise/fonts folder below.

Listing: Using web fonts