font-face property CSS Reference

Definition and Usage

The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.


@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];


Specifies a font name that will be used as font face value for font properties.
URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.
A font-variant value.
A font-stretch value.
A font weight value.
A font style value.
The range of unicode code points defined in the font-face rule.


This example simply specifies a downloadable font to use, applying it to the entire body of the document.View live sample

  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("webfont.ttf");
    body { font-family: "Bitstream Vera Serif Bold", serif }
  This is Bitstream Vera Serif Bold.
In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user doesn't have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  font-weight: bold;


Desktop browsers

FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support3.5 (1.9.1)
WOFF3.5 (1.9.1)
SVG FontNot supported
Unimplemented (see bug 119490)
(Yes)Not supported(Yes)(Yes)
unicode-rangeNot supported(Yes)9.0(Yes)(Yes)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support(Yes)1.0 (1.9.1)NANot supported10.0(Yes)
WOFFNA5.0 (5.0)NANot supported11.0Not supported
SVG fontsNANot supported
Unimplemented (see bug 119490)
NANot supported10.0(Yes)
unicode-rangeNANot supportedNANot supportedNA(Yes)

Relative articles