Now with CSS3, web developers are able to use any font, and be rest assured that the font will be displayed as intended. Some fonts can be freely downloaded from the Internet with flexible licensing agreements, while others can be purchased. Once you obtain the font files, you simply include the font files on your web server, and they will be automatically downloaded to the visitor’s computer as needed. These “web fonts” are defined with the @font-face rule.

@font-face Rule

Font files need to be stored on your web server so that your visitors can download the files. Depending on the browser, different file types will be needed. For example, Firefox, Chrome, Safari, and Opera support True Type fonts .ttf, and OpenType Fonts .otf. Internet Explorer 9+ supports Embedded OpenType fonts .eot. Internet Explorer 8 and earlier versions do not support the @font-face rule.

Example

Before you can incorporate a web font in your web application using the @font-face rule, you must first define a name for the font in your style sheet. You must also map it to the font file that is located on your web server, or another URL.

Font Descriptors

There are various font descriptors that can be defined inside the @font-face rule.