CSS @font-face Rule

In the CSS @font-face rule is used to associate a font name that can be used in a style sheet. A font-family descriptor is used within the rule to name the font and an src descriptor is associated with an external font name. This can be used with downloadable fonts. This CSS @font-face rule can contain more than one properties (max 24).

With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.

In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!


@font-face {
Parameter: The @font-face rule accepts four parameter as mentioned above and described below:

  • font-family: It is used to hold the fonat-family.
  • src: It is used to hold the src file path(url)
  • font-stretch: It is used to set the text wider or narrower.
  • font-weight: It is used to hold the font-weight.
  • font-style: It is used to hold the font-weight.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -