CSS Google Fonts

CSS Google Fonts

Google Fonts provides a collection of open-source font families that can be loaded from Google's servers and used on web pages with CSS.

Instead of storing the font files on your own website, you can select a font from Google Fonts, add the provided stylesheet link to your HTML, and then apply the font with the CSS font-family property.

Choosing a Google Font

Start by visiting Google Fonts . You can browse the available font families and preview how text looks in different typefaces.

When choosing a font, consider how it will be used on the website. A decorative font may work well for headings, while body text generally benefits from a typeface that remains easy to read at smaller sizes.

Adding a Google Font

Google Fonts can provide a stylesheet URL containing the CSS needed to load the selected font. Add the stylesheet using a <link> element inside the <head> of the HTML document.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cause:wght@100..900&display=swap" rel="stylesheet">

The stylesheet request tells the browser which font family to load. The display=swap parameter allows fallback text to be displayed while the web font is loading.

The two preconnect links are commonly provided with Google Fonts embed code. They allow the browser to begin establishing connections to the Google Fonts servers before the font resources are requested.

Applying a Google Font

After the Google Fonts stylesheet has been added, use the font's family name with the CSS font-family property.

body {
  font-family: "Cause", sans-serif;
}

The family name must match the font family being loaded. A generic fallback such as sans-serif should also be included in case the web font is unavailable.

Font Weights and Styles

A font family may provide several weights and styles. Load only the versions the website actually needs rather than requesting every available variation.

<link href="https://fonts.googleapis.com/css2?family=Cause:wght@100..900&display=swap" rel="stylesheet">

This request loads Cause at weights 400 through 900, along with Cause Italic at weight 100.

Once those font faces are available, normal CSS properties determine which version is used.

p {
  font-family: "Cause", sans-serif;
  font-weight: 400;
}
strong {
  font-weight: 700;
}
em {
  font-style: italic;
}

Using Multiple Google Fonts

More than one Google font family can be requested when a design uses different typefaces for headings and body text.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Slab&display=swap" rel="stylesheet">

Each family can then be assigned to different elements.

body {
  font-family: "Open Sans", sans-serif;
}
h1, h2 {
  font-family: "Roboto Slab", serif;
}

Using several font families increases the number of font resources a page may need to download, so additional families should be added only when they contribute to the design.

Google Font Fallbacks

Google Fonts are downloaded resources, so a fallback font should always be included in the font-family list.

body {
  font-family: "Cause", Arial, sans-serif;
}

If Roboto has not loaded or cannot be downloaded, the browser can use Arial. If Arial is unavailable, the generic sans-serif family provides another fallback.

Google Fonts and Performance

Each additional font family, weight, and style can require another font resource to be downloaded. Loading more fonts than a page needs can increase the amount of data transferred and affect page performance.

Choose a limited number of font families and request only the weights and styles that are actually used. Suitable fallback fonts also allow text to remain visible while web fonts are loading.

Google Fonts and Privacy

When Google Fonts are loaded directly from Google's servers, the visitor's browser makes requests to an external service. Depending on the website, its visitors, and applicable privacy requirements, this may need to be considered when deciding how fonts are delivered.

Fonts available through Google Fonts can also be downloaded and self-hosted when permitted by their license. Self-hosting avoids relying on Google Fonts servers for delivery and gives the website owner more direct control over the font files.

The next tutorial explains how to host web font files directly on your own website.

Google Font Example

The following example loads the Cause font from Google Fonts and applies it to the first paragraph. Open the example in the editor to see how the external stylesheet is included in the HTML and how the font is applied with font-family.

p.claus {
  font-family: "Cause", sans-serif;
}