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

Rest assured that this section of code is not as complicated as it looks. In the majority of situ-
ations where it'll be employed, it won't be necessary to understand much about it.
What this section does is include the Lato font, using all of the code necessary to ensure it
loads on as many browsers and operating systems as possible. The only parts of this code
that it's useful to be familiar with are: the file names of the different font files, which should
all point to valid files (more on this in a moment); and the font-family declaration at the top,
which is the name of the font we'll use later in the CSS (and which we've already used in one
declaration block example in this chapter).
To ensure cross-browser compatibility, the syntax for the @font-face at-rule embeds the
font using four different font types (EOT, WOFF, TTF, and SVG). The browser will load
whichever version of the font it can. And it does this without loading any of the other ver-
sions, thus giving the user the fastest (and therefore best,) possible experience.
There's much more to this syntax than we have the space to cover here. To read up on this
subject, check out the article “The New Bulletproof @font-face Syntax” on fontspring.com.
Including the Different Font Files
If we examine the big @font-face code block above, we see that it references four differ-
ent font files that we haven't yet included in our project's source files. So how do we do we
go about adding these?
For the RecipeFinder website, we intentionally selected a pair of fonts that are freely avail-
ableforembeddingaswebfonts.That'stoensurewedon'thavetoworryaboutfontlicensing
issues. Whenever including a font using @font-face , it's important that the font specific-
ally allows for embedding using @font-face . Some fonts can be included on web pages
using images or another format, but not via @font-face —even if it's been paid for. So be
sure to check the font license before making your choice.
The safest way to find free fonts that allow @font-face embedding is to use an online font
service that specializes in free web fonts. Two highly recommended services are Google Web
Fonts and FontSquirrel. BoththeLatoandChelseaMarketfontsareavailable onGoogleWeb
Fonts, so that's the service we've used to obtain these free fonts.
When choosing a font using Google Web Fonts, it's not required to download the font and
include it in the website's source files. Instead, simply use Google's linked CSS file for that