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 href="https://fonts.googleapis.com/css?family=Droid+Serif|PT+Sans" 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 ...

Get AMP: Building Accelerated Mobile Pages now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.