HTML and CSS Reference
In-Depth Information
The syntax is fairly simple: a specialized rule in a style sheet, prefixed with an
@
symbol (and such special
rules are called
at-rules
), defines a customized font name that can be used throughout the rest of the style
sheet. That definition also includes a
src
property to specify a source font file residing on the web server,
and it may include a few other properties describing the font. When the new custom font name appears in
a CSS rule elsewhere in the style sheet, the browser will first seek any locally installed fonts by that name
and, if it doesn't find one, will download the font file from the server to use for rendering the text.
Listing 10-26 shows a simple
@font-face
rule, specifying the family name “Lobster Two” and a source
reference using the familiar
url(...)
data type to indicate the file's location on the server. Quotation
marks around the family name are optional if the name is a single word, but multi-word names need to be
enclosed in quotes. After the
@font-face
rule is a rule for
h1
elements, with Lobster Two appearing as
just another font in the list. If the embedded font can't be used for any reason—if the file is missing, if the
browser can't support the file format, or if the browser doesn't support
@font-face
at all—the browser will
use the next alternative typeface.
Listing 10-26.
An
@font-face
rule defines an embedded web font
@font-face {
font-family: "Lobster Two";
src: url(fonts/LobsterTwo-Regular.woff);
}
h1 {
font: normal 60px/1.1 "Lobster Two", "Monotype Corsiva", cursive;
margin: 0;
}
According to these rules, browsers that support web fonts (and that support the WOFF format; more on
font formats in a minute) will display
h1
elements in Lobster Two at 60 pixels, shown in Figure 10-22. This
is an open source typeface designed by Pablo Impallari and available for free from his website
(
impallari.com/lobster
). Browsers that can't display the embedded font will instead display Monotype
Corsiva, a fairly common system font, or else they'll fall back to a generic cursive typeface.
Figure 10-22.
A heading displayed in Lobster Two, a font that isn't likely to be installed on the viewer's computer
