Links, Text, and Custom Fonts - Jump Start CSS - page 112

}
body {
background: #cab5a3 url(../images/bg-main.gif) repeat
repeat 0 0;
color: #333;
font-family: Lato, Arial, Helvetica, sans-serif;
}
Now we have all three fonts referenced in our CSS, but we have to make sure the file refer-
ences are correct. Let's go back to the zip file of generated fonts we downloaded from FontS-
quirrel, so we can grab the 12 files we need for this: the EOT, WOFF, TTF, and SVG versions
of each of the three fonts.
Let's create a folder in our website's main folder called fonts, and copy all 12 of those files
into that new fonts folder. Assuming our CSS file is inside a folder of its own, the font file
references in our @font-face declarations are now incorrect. So, our next job is to make
some changes to our @font-face declarations. Here's the one for Chelsea Market, correc-
ted:
@font-face {
font-family: 'ChelseaMarket';
src: url('../fonts/chelseamarket-regular-webfont.eot');
src: url('../fonts/
chelseamarket-regular-webfont.eot?#iefix')
↵ format('embedded-opentype'),
url('../fonts/chelseamarket-regular-webfont.woff')
format
↵ ('woff'),
url('../fonts/chelseamarket-regular-webfont.ttf')
format
↵ ('truetype'),
url('../fonts/
chelseamarket-regular-webfont.svg#chelsea_
↵ marketregular') format('svg');
font-weight: normal;