Google Web Fonts

Use Cases

• Importing Google Fonts in HTML
• Building font CSS URLs (family, style, weight, subset, text parameters)
• Controlling font loading behavior with font-display
• Applying font effects (Beta)

Quick Start

1. Include the Font Stylesheet

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">

2. Use the Font in CSS

body {
  font-family: 'Font Name', serif;
}

Building API Parameters

Basic Format

https://fonts.googleapis.com/css?family=Font+Name

Multiple Fonts (separated by |)

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Styles and Weights (separated by :)

Example:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

font-display Control

https://fonts.googleapis.com/css?family=Roboto&display=swap

Subsets (subset parameter)

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic,greek

Performance Optimization (text parameter)

Specify the characters needed to reduce the font file size by up to 90%:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Font Effects (Beta)

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Usage:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Common Effects List