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 }
Search WWH ::

Custom Search