CSS @font-face Rule
The @font-face CSS at-rule rule is used to associate a font name with which a style sheet can be associated. Within the rule, a font-family descriptor is used to name the font, and a src descriptor is associated with an external font name. This can be used with fonts that are available for download. This CSS @font-face rule can have multiple properties.
Syntax
Property Values
| @font-face | Value | Description |
|---|---|---|
| font-family | name | Required. The font's name is defined here. |
| src | URL | Required. Optionally specify the URL(s) from which the font should be downloaded. This property specifies how the font should be stretched. The default setting is "normal." |
| font-stretch |
normal
condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. This property specifies how the font should be styled. The default setting is "normal." |
| font-style |
normal italic oblique |
Optional. Defines the font's boldness. The default setting is "normal." |
| font-weight |
normal
bold 100 200 300 400 500 600 700 800 900 |
Optional. The range of unicode characters that the font supports is defined here. "U+0-10FFFF" is the default value. |
| unicode-range | unicode-range | Optional. The range of unicode characters that the font supports is defined here. "U+0-10FFFF" is the default value. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 4.0 | 3.5 | 3.1 | 9.0 | 10.0 |
| WOFF | 5.0 | 3.6 | 5.1 | 9.0 | 11.1 |
| WOFF2 | 36.0 | 39.0 | 10.0 | 14.0 | 26.0 |
| SVG | Not supported | Not supported | 3.2 | Not supported | Not supported |
| EOT | Not supported | Not supported | Not supported | 6.0 | Not supported |