CSS3 @font-face Rule
Example
Specify a font named "myFirstFont" and the URL where it can be found:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the @font-face rule.
However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.
Note: Internet Explorer 8 and earlier versions do not support the @font-face rule.
Property Definition and Usage
The @font-face rule allows web designers to no longer have to use one of the "web-safe" fonts.
Font name in the @font-face rule:
- font-family: myFirstFont;
The font file is located somewhere on your server, refer to CSS:
- src: url('Sansation_Light.ttf')
If the font file is located at a different location, use the full URL:
- src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
Now ready to use the font, here is an example of how to use it for all div elements:
Syntax:
The following example is for the font used in div:
Syntax
| 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 <br>condensed <br>ultra-condensed <br>extra-condensed <br>semi-condensed <br>expanded <br>semi-expanded <br>extra-expanded <br>ultra-expanded | Optional. Defines how the font should be stretched. The default value is "normal". |
| font-style | normal <br>italic <br>oblique | Optional. Defines the style of the font. The default value is "normal". |
| font-weight | normal <br>bold <br>100 <br>200 <br>300 <br>400 <br>500 <br>600 <br>700 <br>800 <br>900 | Optional. Defines the thickness of the font. The default value is "normal". |
| unicode-range | unicode-range | Optional. Defines the range of Unicode characters the font supports. The default value is "U+0-10 FFFF". |
Related Articles
CSS3 Tutorial: CSS3 Fonts