CSS @font-face rule
Topic: CSS3 Properties ReferencePrev|Next
Description
The @font-face rule is used to associate a font name to be used in a style sheet with some downloadable font. A font-family descriptor is used within the rule to name the font and a src descriptor is associated with an external font name.
Syntax
The syntax of this at-rule is given with:
| @font-face: | font-description |
The @font-face rule contains one or more property declarations, like those in a regular CSS, which are called font descriptors. You can specify up to 24 different properties, however explaining them all is beyond the scope of this reference — To learn more about please visit W3C CSS Fonts Module page.
The general form of an @font-face at-rule is:
Later, the font can be used as a name within properties like font-family and font, though you should specify other font names as a fallback in case downloadable font is not supported or the font fails to load for some reason.
The example below shows the @font-face property in action.
Example
Try this code »@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
font-family: "OpenSans", Arial, sans-serif;
font-size: 1.2em;
}
Note: By using the @font-face rule you don't need to depend on the limited number of fonts users have installed on their computers.
It is also possible to set selection of a particular downloadable font when a particular font characteristic like bold or italic is set, by adding the corresponding rule to the @font-face.
Example
Try this code »@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansBold";
src: url("../fonts/OpenSans-Bold.eot");
src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
font-family: "OpenSansBold", Arial, sans-serif; /* Specify the OpenSans bold font */
}
p {
font-family: "OpenSans", Arial, sans-serif;
}Parameters
Parameters have the following meanings:
| Parameter | Value | Description |
|---|---|---|
| Required — The following parameters are required. | ||
font-family |
font-family |
Defines the font name that will be used as a font-family value for font properties. |
src |
url |
Specifies the location of a font file to use. |
| Optional — The following parameters are optional. | ||
font-style |
font-style |
A valid font-style property value. |
font-weight |
font-weight |
A valid font-weight property value (except for the relative values, bolder and lighter). |
Browser Compatibility
The @font-face rule is supported in all major modern browsers.
 |
Basic Support—
|
Note: The support for particular font technologies varies significantly across the browsers. Internet Explorer supports .eot and .wof type fonts, while Firefox, Chrome, Safari, and Opera supports .woff, .ttf and .otf type fonts.
Further Reading
See tutorial on: CSS Fonts.
