@font-face
| IE5.5+ | FF2 | Saf3 | Op9.5 |
|---|---|---|---|
| Partial | None | None | None |
| Version |
|---|
| CSS2, 3 |
Example
This at-rule declares the font family called Example Font, which is used in the statement that follows:
@font-face {
font-family: "Example Font";
src: url("http://www.example.com
➥ /fonts/example");
}
h1 {
font-family: "Example Font",
➥ sans-serif;
}Description
The
@font-face at-rule allows you to define custom
fonts. It was first defined in the CSS2 specification, but was removed
from CSS2.1. Currently, it’s a draft recommendation for CSS3. The at-rule
contains one or more property declarations, like those in a regular CSS
rule set, which are called font descriptors. You
can specify up to 24 different properties, but it’s beyond the scope of
this reference to explain them all—you can read about them at the W3C Web Fonts page.
The font descriptors allow you to define fonts, and to influence the browser’s selection of fonts when no matching font is found on the client system. This matching can be performed not only on the font name, but on many other font characteristics as well.
In the simplest usage scenario,
@font-face allows you to specify a
font-family name, and the URI to a source file for the
font, which can be downloaded by the user agent if needed. You can then
use the font-family name in other
font-family declarations where
required.
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | None |
| 1.5 | None | |
| 2.0 | None | |
| Safari | 1.3 | None |
| 2.0 | None | |
| 3.0 | None | |
| Opera | 9.2 | None |
| 9.5 | None |
Internet Explorer versions 5.5 and later offer a partial implementation for the browser’s WEFT (Web Embedding Fonts Tool) technology, but this only works with EOT (Embedded OpenType Font) files.
Some experimental support is provided for the
@font-face at-rule in nightly builds of
WebKit.1
Related Reading
Footnotes
1 Web Kit is used by Safari.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
