HTML and CSS Reference
In-Depth Information
Generating the Font Files
In the case of RecipeFinder, we're not going to use the Google Web Font embedded
<link>
tag code. Instead, we'll use the @font-face declaration directly. We're taking this slightly
more complicated route so that we can cover the full process of adding a licensed custom
font to a web page. As mentioned earlier, the typical cross-browser syntax for
@font-face
includes four different files. Let's find the Lato and Chelsea Market fonts on Google Web
Fonts so we can generate all the files we'll need.
Go to Google Web Fonts and type “Chelsea” in the search field on the left side of the page,
as shown in
Figure 4.4
Figure 4.4. Finding the Chelsea Market font on Google Web Fonts
You'll see the Chelsea Market font appear on the right side in the search results. Click the
button that says Add to Collection, as shown in
Figure 4.5
.
