CSS3 @font-faceRules
Example
Specify a font named "myFirstFont", and specify the URL where it can be found:
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Try it Yourself »
Browser Support
Internet Explorer 9, Firefox, Opera,Chrome, and SafariSupported@font-face Rules.
However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support both .ttf and .otf font types.
Note:Internet Explorer 8 and earlier IE versions do not support the @font-face rule.
Property definition and usage instructions
The @font-face rule, one of the rules that web designers no longer have to use "web-safe" fonts.
The name of the font, @font-face rule:
- font-family: myFirstFont;
The font file is contained somewhere on your server, refer to CSS:
- src: url('Sansation_Light.ttf')
If the font file is in a different location, use the full URL:
- src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
Now the font is ready to use. Here is an example of how to use it on all div elements:
{
font-family: myFirstFont;
}
Syntax:
-
@font-face
{
font-properties
}
The following example is a font used in a div:
{
font-family: myFirstFont;
}
Syntax
{
font-properties
}
| Font description | Value | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font is downloaded from. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
| font-style | normal italic oblique |
Optional. Defines what style the font should be. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the weight of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of Unicode characters that the font supports. Default value is "U+0-10FFFF" |
Related Articles
CSS3 Tutorial:CSS3 Fonts
other extensions