@font-face CSS at-rule Specifies a custom font for displaying text. Fonts can be loaded from a remote server or from a user’s locally installed font. If the local() function is provided to look up the specified font name locally from the user, and a match is found, the local font is used. Otherwise, the font uses the resources downloaded by the URL () function.

When using both url() and local() functions, the user’s downloaded copy of the font is searched for the font in order for the font copy that the user has installed to be used when needed.

The @font-face rule can be used in any CSS conditional group rule, not just at the top level.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Copy the code

grammar

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
where 
<family-name> = <string> | <custom-ident>+
Copy the code

The values

font-family

The specified font name will be used for the font or font-family property (i.e. font-family:;).

src

The URL of the remote font file location or the font name on the user’s computer. You can specify the font on the user’s local computer by name using the local syntax (i.e. SRC: local(‘Arial’); . If the font is not found, another source will be tried until it is found.

font-variant (en-US)

A font-variant value.

font-stretch (en-US)

A font-stretch value.

font-weight (en-US)

A font-weightvalue.

font-style

Description of the font referred to by SRC. If the required font matches the description, the font defined in this font-face is used.

unicode-range (en-US)

The Unicode font range defined in the @font-face

The sample

The following example simply defines a downloadable font and applies it to the entire body tag of the document.

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>
Copy the code

In the following example, a backup of the user’s local font “Helvetica Neue Bold” is used; If the current user (browser) does not have the font installed (both possible font names have been tried), the downloaded font “mgOpenModernabold.ttf” will be used instead:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
Copy the code

This example defines a New font, using the font Times New Roman for normal text and Consolas for bold text.

@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}
Copy the code