CSS font-face Rule

The @font-face rule loads a font file into a web page.

The file can come from a remote or local server.

If the file fails to load, a fallback or default font will be used.

Example

#

A @font-face rule that brings the JosefinSans font into the page.

This text uses the JosefinSans font

<style>
  @font-face {
    font-family: JosefinSans;
    src: url(/media/JosefinSans-Regular.ttf);
  }
</style>

<p style="font-family: JosefinSans">
  This text uses the JosefinSans font
</p>

Syntax

@font-face { font-properties }

Note: The font-properties value includes one or more descriptors listed below.


Values

#

Descriptor Values Description
font-family name Required. The assigned font name. This name is further referenced in the CSS file.
src URL Required. File path or URL the font is loaded from.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Specifies how the font is stretched.
font-style normal
italic
oblique
Optional. Specifies a font style.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Optional. Specifies boldness of the font.
unicode-range unicode-range Optional. Specifies the Unicode character range the font supports. Default is "U+0-10FFFF"

More examples

The loaded font is named "Roboto" with the font-family descriptor.

This text is displayed with the Roboto font.

<style>
  @font-face {
    font-family: Roboto;
    src: url(/media/roboto-regular.woff);
  }
</style>

<p style="font-family: Roboto">
  This text is displayed with the Roboto font.
</p>

Browser support

This table shows when @font-face support started for each browser.

Format TTF/OTF WOFF WOFF2 SVG EOT
Chrome
4.0 5.0 36.0 4.0 Not Supported
Firefox
3.5 3.6 35.0 Not Supported Not Supported
IE/Edge
9.0 9.0 Not Supported Not Supported 6.0
Opera
10.0 11.1 26.0 9.0 Not Supported
Safari
3.1 5.1 Not Supported 3.2 Not Supported

You may also like

Guides