HTML and CSS Reference
In-Depth Information
Web font fi les are available on several sites on the Web. In many cases, these are
not free fonts and you must pay for their use. Other fonts are free but are licensed
only for non-commercial use. You always should check the EULA (End User License
Agreement) before downloading and using a Web font to make sure you are in com-
pliance with the license. Finally, many Web fonts are available through
Web Font
Service Bureaus
,
which supply Web fonts on their servers that page designers can link
to for a fee.
The great advantage of a Web font is that it gives a designer control over the typeface
used in a document. The disadvantage is that it becomes another fi le for the browser to
download and install, adding to the time required to render the page.
The
@font-face
Rule
To access and load a Web font, you add the rule
@font-face {
font-family:
name
;
src: url(
url
) format(
text
);
descriptor
:
value
;
descriptor
:
value
;
…
}
to the style sheet, where
name
is the name assigned to the Web font,
url
is the location
of the font defi nition fi le,
text
is an optional text description of the font format, and the
descriptor
:
value
pairs are optional style properties that describe how and when the
font should be used. For example, the following
@font-face
rule defi nes a font face
named
GentiumBold
:
@font-face {
font-family: GentiumBold;
src: url(GentiumB.ttf) format('truetype');
font-weight: bold;
}
The GentiumBold font in this code is a TrueType font based on a description stored
in the
GentiumB.ttf
fi le. The
font-weight
properties tell browsers to apply this font
only for bold text. Note that at the time of this writing, you should avoid including the
font-weight
and
font-style
properties in the
@font-face
rule because those fea-
tures are not well supported by most browsers and can produce unexpected results.
Once you've defi ned a font using the
@font-face
rule, you can use the font else-
where in your style sheets by including the font name in your font lists. For example,
the style
font-family: GentiumBold, 'Arial Black', Gadget, sans-serif;
attempts to load the GentiumBold font defi ned above, followed by Arial Black, Gadget,
and then a sans-serif font of the browser's choosing.
