HTML and CSS Reference
In-Depth Information
Installing a Cross-Browser Web Font
To support all of the font formats described in Figure 3-38, you can add additional source
fi les to the
@font-face
rule. A browser then will go through the list, loading the last font
fi le format from the list that it supports. Part of the challenge is that at the time of this
writing, Internet Explorer does not support all of the features of the
@font-face
rule and
returns an error if it attempts to load another font if le. Thus, to defi ne a font that works
across different browsers, you should design the
@font-face
rule as follows
The rule always should
be placed at the top of
the style sheet, before any
styles that specify the use
of a Web font.
@font-face {
font-family:
name
;
src: url(
eot
);
src: local('☺'),
url(
woff
) format(
text
),
url(
ttf
) format(
text
),
url(
svg
) format(
text
);
descriptor
:
value
;
…
}
where
eot
is the font defi ned in an Embedded OpenType fi le (the only format supported
by Internet Explorer at the time of this writing),
woff
is the font defi ned in a Web Open
Font fi le,
ttf
is the font defi ned in a TrueType or an OpenType fi le, and
svg
is the font
defi ned in a Scalable Vector Graphics fi le. The
local('☺')
part of this code is a pro-
gramming hack developed by Paul Irish (
www.paulirish.com
) to
prevent Internet Explorer
from attempting to load the other font fi les, causing an error. Note that to enter this
symbol, your text must be stored using Unicode encoding rather than ASCII or ANSI. The
sa_styles.css fi le already has been created for you using that text encoding.
Tammy is not completely pleased with the Verdana font you've used for the home
page and would like a typeface with thinner lines. She has located a Web font named
NobileRegular
that she is free to use under the End User License Agreement and thinks
would work better. In acquiring this font, she also obtained the following
@font-face
rule that can be used to load the font into a CSS style sheet:
@font-face {
font-family: 'NobileRegular';
src: url('nobile-webfont.eot');
src: local('☺'),
url('nobile-webfont.woff') format('woff'),
url('nobile-webfont.ttf') format('truetype'),
url('nobile-webfont.svg#webfontsKo9tqe9') format('svg');
}
Rather than retype this code, you'll copy it from her text fi le and paste it into your
style sheet. Add this font defi nition now.
