CSS3 @font-face rule
Specify the font named "myFirstFont" and specify where to find its URL:
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); / * IE9 */
}
Try it out . . .
Description of property definition and use
@font-face rule, web designers no longer have to use one of the "web-safe" fonts.
Font name, 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 that you're ready to use the font, here's an example of how to use all of its div elements:
div
{
font-family: myFirstFont;
}Grammar:
@font-face
{
font-properties
}The following examples are fonts used in div:
div
{
font-family: myFirstFont;
}Grammar:
@font-face
{
font-properties
}| The font description | Value | Description |
|---|---|---|
| font-family | name | Required. Define the name of the font. |
| Src | Url | Required. Define the URL (S) for the font download |
| font-stretch |
normal
condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. D efines how the font should be stretched. The default is OK. |
| font-style |
normal
italic oblique |
Optional. D efine how the font should be styled. The default is OK. |
| font-weight |
normal
bold 100 200 300 400 500 600 700 800 900 |
Optional. D efines the weight of the font. The default is OK. |
| unicode-range | unicode-range | Optional. D efine the range of Unicode characters that the font supports. The default value is "FFFFF" |
Browser support
| Browser |
|---|
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support @font-face rules.
However, Internet Explorer 9 only supports .eot type fonts, Firefox, Chrome, Safari, and Opera .ttf two .otf type fonts.
Note: Internet Explorer 8 and earlier versions of IE do not support @font-face rules.