@font-face CSS At-Rule
Description
The @font-face
CSS at-rule allows you to define and use your own custom fonts, thus allowing you to extend the limited set of standard system fonts that are installed by default on a computer, and that browsers can access and use.
Syntax
@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>; ] }
Values
- font-displayDetermines how a font face is displayed based on whether and when it is downloaded and ready to use.
- font-familySpecifies a name that will be used as the font face value for font properties.
- font-stretchA font-stretch value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%;
- font-styleA font-style value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg;
- font-weightA font-weight value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
- font-variantA font-variant value.
- font-feature-settingsAllows control over advanced typographic features in OpenType fonts.
- font-variation-settingsAllows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.
- srcSpecifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the users computer.
- unicode-rangeThe range of Unicode code points to be used from the font.
Example
@font-face {
font-family: 'Open Sans';
src: url('opensans.eot');
src: url('opensans.eot?#iefix') format('embedded-opentype'),
url('opensans.woff') format('woff'),
url('opensans.ttf') format('truetype'),
url('opensans.svg#svgFontName') format('svg');
}
Browser Support
Desktop | |||||
4 | 12 | 1 | 3.5 | 10 | 3.1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | 10.1 | 2 | Yes |
Last updated by CSSPortal on: 1st December 2019