HTML and CSS Reference
In-Depth Information
Figure 4.2. RecipeFinder uses two different fonts, both used in the Most Popular section in the sidebar
The heading that says “Most Popular” is set using a font called “Chelsea Market” and the
other text is set using a font called “Lato.” You'll notice these are the two primary fonts used
in our design. Let's define them in our CSS and see what happens.
Of the two fonts, Lato is the most prevalent throughout the page, with Chelsea Market being
used mainly for headings. Here's what we'll do:
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
color: #333;
font-family: Lato;
}
You'll see we've added a declaration to the rule set defining the styles for the <body> ele-
ment on RecipeFinder. This new declaration defines the font-family property, with the
Lato font as the property's value. font-family accepts one or more font names, separated
by commas. So in this case, we could expand the declaration to look like this:
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
color: #333;
font-family: Lato, Arial, Helvetica, sans-serif;
}
But if we apply this declaration to our website and refresh the page, we won't see anything
change. This is because, in order to display a font on a web page using the font-family
property, the user who visits the web page needs to have that font installed on their computer
or mobile device's operating system. Most users are probably not going to have the Lato font
installed, which is why we're not seeing it displayed. In this situation, we're seeing the de-
fault sans-serif font, which is specified in Normalize.css (which we added to RecipeFinder in
Chapter 2 ) . Without Normalize.css, you would likely see a serif font like Times New Roman.
Search WWH ::




Custom Search