HTML and CSS Reference
In-Depth Information
Essentially, the
@font-face
declaration is a way to link to a font that may or may not be on the site
visitor's system. Here's what a sample rule looks like:
@font-face {
font-family: “DragonwickFGRegular”;
src: url(fonts/dragwifg-webfont.ttf) format(“truetype”);
}
A
@font-face
declaration includes two properties:
font-family
and
src
. The
font-family
prop-
erty contains the name of the font you want to link to and the
src
contains the path to that font
file as well as its format. As with online video, a number of different type formats exist and — of
course — different browsers support different formats. The primary formats and their supporting
browsers are as follows:
➤
➤
Embedded OpenType (EOT):
Supported by Internet Explorer
➤
➤
OpenType (OTF):
Supported by Firefox, Safari, Chrome, and Opera
➤
➤
TrueType (TTF):
Supported by Firefox, Safari, Chrome, and Opera
➤
➤
Web Open Font Format (WOFF):
Supported by Firefox, Chrome, and Internet Explorer
(version 9 beta)
Again, as with the
<video>
tag, the solution to the mixed bag of browser support is to offer multiple
versions of the fonts. Because of peculiarities in Internet Explorer, the Embedded OpenType format
must be listed first, followed by a symbolic reference to a local, non-existent font. The smiley-face
symbol is used because there is no font named with this symbol, which prevents any local font from
loading. Finally, the remaining formats are declared: WOFF and TrueType. Here's the complete,
cross-browser compatible,
@font-face
declaration:
@font-face {
font-family: 'DragonwickFGRegular';
src: url('fonts/DragonwickFGRegular.eot');
src: local('
☺
'),
url('fonts/DragonwickFGRegular.woff') format('woff'),
url('fonts/DragonwickFGRegular.ttf') format('truetype');
}
This technique, known as the Bulletproof @font-face Syntax, was developed by
Paul Irish. You can read more details about its background at
http://paulirish
.com/2009/bulletproof-font-face-implementation-syntax/
.
After the
@font-face
declaration, you'll need to use the
font-family
property to assign the linked
font to the desired selector. Should you want to use the newly linked font in your
<h1>
tags, the CSS
rule would look like this:
h1 { font-family: “DragonwickFGRegular”, sans-serif }