Using custom fonts to improve page design

Now that we know how to add custom fonts, let's apply some to our content. We'll use a sans serif font, PT Sans, for our navigation links, and a serif font, Droid Serif, for our main paragraph text (both chosen from Google Fonts). First, we'll add the include-link that Google Fonts generated when we chose the fonts; this gets added to the head of the page (/ch3/fonts.html):

<link  rel="stylesheet">

Now we just have to apply these to the relevant elements of our page. For the navigation links, use the following:

.primary-nav li {
  font-family: "PT Sans", sans-serif;
}

And we'll apply Droid Serif to all other text:

body {
  font-family: "Droid Serif", serif;
}

Finally, let's stick with Georgia for our logo and h1 texts. Note that we don't need to include Georgia explicitly, as it's available on most systems, but we can provide a fallback in any case:

.logo, h1 {
  font-family:Georgia, "Times New Roman", serif;
}

This resulting page should look something like the following image: