CSS3 - Fonts
With CSS3, web designer are no longer forced to use only "web-safe" font
Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes.
When you have found/bought the font you wish to use, simply include the font file in the web site, and it will be downloaded automatically to the user when needed.
You will have to describe your selected font with the new CSS3 @font-face rule.
In the @font-face rule you define a name for the font, and the URL to the font file:
CSS3 @font-face Rule Example
@font-face
{
font-family: myFirstFont;
src: url('arial.ttf'),
url('arial.eot') format("opentype"); /* IE */
}
CSS3 @font-face Rule Browser Support
| Property |
Browser Support |
| @font-face |
|
|
|
|
|
Internet Explorer only support fonts of type .eot (Embedded OpenType).
Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts).
Note: Make sure you have font files in specific folder.
Using The New Font
To use the new font, add "myFirstFont" as the value of the font-family property:
div
{
font-family:myFirstFont;
}
The following table lists all the font descriptors that can be defined inside the @font-face rule:
| Descriptor | Values | Description |
| font-family | name | Required. Defines a name for the font |
| 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 is "normal" |
| font-style | normal
italic
oblique | Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal
bold
100
200
300
400
500
600
700
800
900 | Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
