HTML and CSS Reference
In-Depth Information
define the font-family property in our CSS using the correct name for the font. We can see
the name referenced in the URL, where it says “
family=Lato
”. So, in this instance, our
font declared for the
<body>
element would look like this, with fallbacks listed:
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
color: #333;
font-family: Lato, Arial, Helvetica, sans-serif;
}
RecipeFinder includes the Lato font in two different styles: regular and bold. These styles
are represented by the numbers “
400
” (for regular) and “
700
” (for bold), and these are ap-
pended to the file reference in the
<link>
tag so that Google knows which font variations
to reference in the CSS file. And so, if we want to include the Lato font in bold, we do the
following:
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
color: #333;
font-family: Lato, Arial, Helvetica, sans-serif;
font-weight: 700;
}
This declaration block uses another new property, the
font-weight
property. This defines
the weight, or heaviness, of the font. The default is “
normal
”, and it can also be set to
“
bold
”,“
lighter
”,“
bolder
”,orthenumbers“
100
”,“
200
”,“
300
”,upto“
900
”—but
only in increments of 100. It's worth noting, however, that these different values will work
only if the font itself allows for the weights specified.
In this example, we could use either a value of “
700
” or a value of “
bold
”—they have ex-
actly the same effect as one another.
