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.
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>
@font-face { font-properties }
Note: The font-properties value includes one or more descriptors listed below.
| 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" |
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>
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 |
