Google Web Fonts

Use the Google Fonts API to add fonts to web pages.

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

html

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

2. Use the Font in CSS

css

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

Building API Parameters

Basic Format

text

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

Multiple Fonts (separated by |)

text

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

Styles and Weights (separated by :)

Style	Specifier
Italic	italic or i
Bold	bold or b, or numeric value such as 700
Bold Italic	bolditalic or bi

Example:

text

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

font-display Control

text

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

Subsets (subset parameter)

text

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%:

text

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

Font Effects (Beta)

text

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

Usage:

html

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

Common Effects List

Effect	API Name	Class Name
3D	3d	font-effect-3d
3D Float	3d-float	font-effect-3d-float
Anaglyph	anaglyph	font-effect-anaglyph
Neon	neon	font-effect-neon
Shadow Multiple	shadow-multiple	font-effect-shadow-multiple
Vintage	vintage	font-effect-vintage