ExampleSpecify a font named "myFirstFont", and specify the url where it can be found:
Try it yourself » |
The @font-face rule is supported in all mojor browsers.
Internet Explorer only support fonts of type .eot
Firefox, Chrome, Safari, and Opera support fonts of type .ttf and .otf
With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
Make a font-face rule by giving the font a name:
Include a font file somewhere on your server, and refer to it with CSS:
If the font file is located at a different domain, use a full URL instead:
Now the font is ready to use, below is an example of how to use it for all div elements:
div { font-family: myFirstFont; } |
@font-face { font-properties } |
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
url | URL | Required. Defines the url where the font should be 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 how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |