The @font-face is a rule standardized in the CSS3 Fonts Module, which was first introduced as a Working Draft in 2002. The @font-face rule allows us to declare where on the Internet fonts that we choose and their formats may be located at; so they can be used later in our style sheet as a value for the font-family property.

The interesting thing is that the @font-face has been in and out of the CSS specifications for a while without being implemented by most browsers.

NOTE: Before you can use a web font in your styles, you need to tell the browser where to find the necessary font files with an @font-face rule. The syntax below shows how:

Syntax:

@font-face {

      font-family: font_name;

      src: location [format];

}

The @font-face rule is made up of what the CSS specification calls descriptors, which define the location and style characteristics of the font. A font-family descriptor defines the name of the web font. You can choose any name you want (if the name contains spaces, it must be wrapped in quotes).

If you choose the name of a font that already exists on a user’s computer, the font specified in the @font-face rule takes precedence. 

The src property tells the browser where to find the font files. In order to specify multiple values for different font formats separate them with a comma to form a comma-separated list.

 

›› go to examples ››