HTML and CSS Reference
In-Depth Information
• To ensure the best experience possible, you can define a font stack on the
font-
family
property, for those rare instances when the custom font doesn't load.
• To use a font with
@font-face
, you must read the license for that font and ensure
that it allows for
@font-face
embedding. This is necessary even if you have paid
for the font.
Using Our New Fonts on RecipeFinder
As we've seen from this chapter so far, web fonts are a complex matter to deal with. Now that
we have our fonts embedded on our page, and ready to use, let's see where we can identify
some further uses for them. We'll also make some other typographical adjustments and, in
the process, cover a few new CSS properties.
So far, we've applied the Lato Regular font (the non-bold version of Lato) on our
<body>
element. Fonts defined using
font-family
are inherited by child elements, so this applies
the Lato font to all the text on the page. Not all CSS properties behave like this—something
you'lllearnfromgainingmoreexperiencewithdifferentCSSproperties.Forexample,apply-
ing 20px of padding to the
<body>
element would apply the padding only to the
<body>
,
not to any elements inside the
<body>
.
In our original design, the main navigation and all the headings use Chelsea Market—one of
theotherfontsweembeddedwith
@font-face
.Notonlythat,butallthetextsetinChelsea
Market is in uppercase. Here's the CSS we're going to add to our stylesheet:
h1, h2, nav {
font-family: ChelseaMarket, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
}
Thefirstthingtonoteisthatwe'regroupingselectors sowecantargetmultiple element types
at once. It's also worth noting that, although we've applied the Chelsea Market font to all of
our
<h2>
elements, we'll have to override that behaviour later in our CSS file for some of
our other
<h2>
elements, which don't use Chelsea Market.
