The CSS3 @font-face Rule
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, include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| @font-face | |||||
Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts).
Internet Explorer 9+ supports the new @font-face rule, but it only supports fonts of type .eot (Embedded OpenType).
Note: Internet Explorer 8 and earlier versions, do not support the new @font-face rule.
Using The Font You Want
In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 9+ only supports fonts of type .eot. Internet Explorer 8 and earlier, do not support the new @font-face rule.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Using Bold Text
You must add another @font-face rule containing descriptors for bold text:
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */
}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf')
,url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 9+ only supports fonts of type .eot. Internet Explorer 8 and earlier, do not support the new @font-face rule.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.
CSS3 Font Descriptors
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 |
| src | URL | Required. Defines the URL of the font file |
| 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" |
