liveBook · Manning

Google Fonts

As explained in Web Design Playground, Second Edition

Google Fonts is a service that provides a catalog of web fonts and the resources needed to load them on websites.

Google Fonts provides hundreds of free web fonts that you can load onto a website instead of hosting font files yourself. The service handles font hosting and licensing, making web typography easier to add without chasing permissions. section 18.3

Add a Google Font with this small workflow:

  • Choose a typeface on Google Fonts and select the styles you need, such as regular, italic, or bold. section 18.3
  • Copy the generated <link> tags into the page's <head>, before your own CSS link or <style> element. section 18.3
  • Use the chosen family in CSS with a fallback, such as font-family: Lato, sans-serif;. section 18.3
  • Limit the number of linked fonts because remote font files can add loading time, even though major hosts optimize delivery. section 18.3

A readable pairing

A portfolio page might use Playfair Display for headings and Open Sans for body text. The generated Google Fonts link loads both families, while CSS assigns each family to its appropriate text. section 20.3

&lt;link rel=&quot;preconnect&quot; href=&quot;<a class="urlb" href="https://fonts.googleapis.com">https://fonts.googleapis.com</a>&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;<a class="urlb" href="https://fonts.gstatic.com">https://fonts.gstatic.com</a>&quot; crossorigin&gt;
&lt;link href=&quot;<a class="urlb" href="https://fonts.googleapis.com/css2?family=Lato">https://fonts.googleapis.com/css2?family=Lato</a>:ital,wght@0,400;1,400;1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

Inspect the generated HTML links for preconnecting to Google's font hosts and loading Lato with regular and italic weights. section 18.3

Figure 20.2 When deciding on a typeface that will render well even on small displays, look for larger counters and apertures, good x-height, and low stroke contrast.

Use the figure as a visual checklist when judging whether a typeface remains legible on small screens. section 20.3

Table 20.1 Recommended Google Fonts pairings for headings and body text (view table figure)

Headings

Body

Body (Alternative)

Playfair Display

Open Sans

Raleway

Merriweather

Fira Sans

Merriweather Sans

Source Serif Pro

Source Sans Pro

Lato

Domine

Roboto

Open Sans

Lora

Varela Round

Lato

Roboto Slab

Roboto

Raleway

Browse suggested Google Fonts combinations for contrasting heading and body typefaces. section 20.3

How Web Design Playground, Second Edition covers it

How deep it goes
Explains selection, style customization, generated links, CSS application, and loading trade-offs, but stops short of font-host internals.
Examples
Demonstrates Lato loading, Lato CSS usage, and heading-body pairings such as Playfair Display with Open Sans.
What it assumes
Assumes basic HTML document structure and CSS usage while explaining hosted fonts, licensing, and typeface criteria.
What you can do after
Apply it via Google Fonts by selecting families, copying generated links, assigning CSS fallbacks, and evaluating small-screen legibility.
How it connects
Connects web fonts with HTML, CSS, licensing, typography, responsive readability, and font pairing.
Cover of Web Design Playground, Second Edition
liveBookmanning.com
Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

Compare how 4 books explain Google Fonts →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.