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#

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 :)#

StyleSpecifierItalicitalic or iBoldbold or b, or numeric value such as 700Bold Italicbolditalic 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#

EffectAPI NameClass Name3D3dfont-effect-3d3D Float3d-floatfont-effect-3d-floatAnaglyphanaglyphfont-effect-anaglyphNeonneonfont-effect-neonShadow Multipleshadow-multiplefont-effect-shadow-multipleVintagevintagefont-effect-vintage