CSS @font-face rule
Definition and usage
By using the @font-face rule, web designers no longer need to use any "web-safe" fonts.
In the @font-face rule, you must first define the font name (e.g., myFirstFont) and then point to the font file.
Tip:The URL of the font should be in lowercase letters. Uppercase letters may produce unexpected results in IE!
To use the font for HTML elements, refer to the font name (myFirstFont) through the font-family property:
div {
font-family: myFirstFont;
}
See also:
CSS Tutorial:CSS Web Fonts
Example
Specify a font named "myFirstFont" and specify the URL where it can be found:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
More TIY examples can be found below the page.
CSS syntax
@font-face {
font-properties
}
| Font descriptor | Value | Description |
|---|---|---|
| font-family | name | Mandatory. Defines the name of the font. |
| src | URL | Mandatory. Defines the URL of the downloaded font. |
| font-stretch |
|
Optional. Defines how the font should be stretched. The default value is "normal". |
| font-style |
|
Optional. Defines the font style. The default value is "normal". |
| font-weight |
|
Optional. Defines the weight of the font. The default value is "normal". |
| unicode-range | unicode-range | Optional. Defines the Unicode character range supported by the font. The default value is "U+0-10FFFF". |
More examples
Example
You must add another @font-face rule that includes a descriptor for bold text:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
The file "sansation_bold.woff" is another font file that contains the bold characters of the Sansation font.
When a paragraph of text with the font family "myFirstFont" should be displayed in bold, the browser will use it.
In this way, you can set multiple @font-face rules for the same font.
Browser support
Internet Explorer, Firefox, Opera, Chrome, and Safari all support the @font-face rule.
The numbers in the table indicate the first browser version that fully supports the font format.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* Edge and IE: Font format is only valid when set to "installable".
* Firefox: Disabled by default, but can be enabled (the flag needs to be set to "true" to use WOFF2).
