HTML and CSS Reference
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-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 :
src: url(GentiumB.ttf) format('truetype');
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,
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.