This guide explains how to use the Google Fonts API to add fonts to your webpages. You don't need to do any programming; all you have to do is add a specialstylesheet link to your HTML document, then refer to the font in a CSS style.
A quick example
Here's an example. Copy and paste the following HTML into a file:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body></html>Then open the file in a modern web browser. You should see a page displaying thefollowing, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by using CSS. Tryadding a shadow to the style in the previous example:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa;}You should now see a drop shadow under the text:
Making the Web Beautiful!
And that's only the beginning of what you can do with the Fonts API and CSS.
Overview
You can start using the Google Fonts API in just two steps:
Add a stylesheet link to request the desired web font(s):
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Style an element with the requested web font, either in a stylesheet:
.css-selector {font-family: 'Font Name', serif;}or with an inline style on the element itself:
<div style="font-family: 'Font Name', serif;">Your text</div>
For a list of fonts you can use, see Google Fonts.
Specifying font families and styles in a stylesheet URL
To determine what URL to use in your stylesheet link, start with the GoogleFonts API base URL:
https://fonts.googleapis.com/css
Then, add the family= URL parameter, with one or more font family names andstyles.
For example, to request theInconsolata font:
https://fonts.googleapis.com/css?family=Inconsolata
To request multiple font families, separate the names with a pipe character(|).
For example, to request the fontsTangerine,Inconsolata, andDroid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Requesting multiple fonts allows you to use all of those fonts in your page.(But don't go overboard; most pages don't need very many fonts, and requesting alot of fonts may make your pages slow to load.)
The Google Fonts API provides the regular version of the requested fonts bydefault. To request other styles or weights, append a colon (:) to the name ofthe font, followed by a list of styles or weights separated by commas (,).
For example:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
To find out which styles and weights are available for a given font, see thefont's listing in Google Fonts.
For each style you request, you can give either the full name or anabbreviation; for weights, you can alternatively specify a numerical weight:
| Style | Specifiers |
|---|---|
| italic | italic or i |
| bold | bold or b or a numerical weight such as 700 |
| bold italic | bolditalic or bi |
For example, to request Cantarell italic and Droid Serif bold, you could use anyof the following URLs:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:boldhttps://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:bhttps://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Use font-display
font-display lets youcontrol what happens while the font is unavailable. Specifying a value otherthan the default auto is usually appropriate.
Pass the desired value in the querystring display parameter:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Specifying script subsets
Some of the fonts in the Google Font Directorysupport multiple scripts (like Latin, Cyrillic, and Greek for example). In orderto specify which subsets should be downloaded the subset parameter should beappended to the URL.
For example, to request the Cyrillic subset of theRoboto Mono font, the URL wouldbe:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
To request the Greek subset of theRoboto Mono font, the URL wouldbe:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
To request both Greek and Cyrillic subsets of theRoboto Mono font, the URL wouldbe:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
The Latin subset is always included if available and need not be specified.Please note that if a client browser supports unicode-range(http://caniuse.com/#feat=font-unicode-range)the subset parameter is ignored; the browser will select from the subsetssupported by the font to get what it needs to render the text.
For a complete list of available fonts and font subsets please seeGoogle Fonts.
Optimizing your font requests
Oftentimes, when you want to use a web font on your website or application, youknow in advance which letters you'll need. This often occurs when you're using aweb font in a logo or heading.
In these cases, you should consider specifying a text= value in your fontrequest URL. This allows Google to return a font file that's optimized for yourrequest. In some cases, this can reduce the size of the font file by up to 90%.
To use this feature, simply add text= to your Google Fonts API requests. Forexample if you're only using Inconsolata for the title of your blog, you can putthe title itself as the value of text=. Here is what the request would looklike:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
As with all query strings, you should URL-encode the value:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
This feature also works for international fonts, allowing you to specify UTF-8characters. For example, ¡Hola! is represented as:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Enabling font effects (Beta)
When making headers or display texts on your website, you'll often want tostylize your text in a decorative way. To simplify your work, Google hasprovided a collection of font effects that you can use with minimal effort toproduce beautiful display text. For example:
This is a font effect!
To use this beta feature, simply add effect= to your Google FontsAPI request and add the corresponding class name to the HTML element(s) that youwant to affect. In our example above, we used the shadow-multiple font effect,so the request would look like:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
To use the effect, add the corresponding class name to your HTML element(s). Thecorresponding class name is always the effect name prefixed with font-effect-,so the class name for shadow-multiple would be font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
You can request multiple effects by separating the effect names with a pipecharacter (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Here is a complete listing of all the font effects that we offer:
| Effect | API Name | Class Name | Support |
|---|---|---|---|
| Anaglyph | anaglyph | font-effect-anaglyph | Chrome, Firefox, Opera, Safari |
| Brick Sign | brick-sign | font-effect-brick-sign | Chrome, Safari |
| Canvas Print | canvas-print | font-effect-canvas-print | Chrome, Safari |
| Crackle | crackle | font-effect-crackle | Chrome, Safari |
| Decaying | decaying | font-effect-decaying | Chrome, Safari |
| Destruction | destruction | font-effect-destruction | Chrome, Safari |
| Distressed | distressed | font-effect-distressed | Chrome, Safari |
| Distressed Wood | distressed-wood | font-effect-distressed-wood | Chrome, Safari |
| Emboss | emboss | font-effect-emboss | Chrome, Firefox, Opera, Safari |
| Fire | fire | font-effect-fire | Chrome, Firefox, Opera, Safari |
| Fire Animation | fire-animation | font-effect-fire-animation | Chrome, Firefox, Opera, Safari |
| Fragile | fragile | font-effect-fragile | Chrome, Safari |
| Grass | grass | font-effect-grass | Chrome, Safari |
| Ice | ice | font-effect-ice | Chrome, Safari |
| Mitosis | mitosis | font-effect-mitosis | Chrome, Safari |
| Neon | neon | font-effect-neon | Chrome, Firefox, Opera, Safari |
| Outline | outline | font-effect-outline | Chrome, Firefox, Opera, Safari |
| Putting Green | putting-green | font-effect-putting-green | Chrome, Safari |
| Scuffed Steel | scuffed-steel | font-effect-scuffed-steel | Chrome, Safari |
| Shadow Multiple | shadow-multiple | font-effect-shadow-multiple | Chrome, Firefox, Opera, Safari |
| Splintered | splintered | font-effect-splintered | Chrome, Safari |
| Static | static | font-effect-static | Chrome, Safari |
| Stonewash | stonewash | font-effect-stonewash | Chrome, Safari |
| Three Dimensional | 3d | font-effect-3d | Chrome, Firefox, Opera, Safari |
| Three Dimensional Float | 3d-float | font-effect-3d-float | Chrome, Firefox, Opera, Safari |
| Vintage | vintage | font-effect-vintage | Chrome, Safari |
| Wallpaper | wallpaper | font-effect-wallpaper | Chrome, Safari |
There are many more ways to style your fonts, and many things are possiblethrough CSS. We are simply providing a few ideas to get you started. For moreideas, try Google searching"css text effects" andbrowse through many of the ideas that are already on the web!
Further reading
- See a complete list of font families provided by the Google Fonts API onGoogle Fonts.
- Learn how to use the Web Font Loader to havemore control over loading fonts.
- Learn more about how the Google Fonts API works on theTechnical Considerations page.
