Getting Started
This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.
Contents
A quick example
Here's an example. Copy and paste the following HTML into a file:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Making the Web Beautiful!
Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by using CSS. Try adding 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 Font API and CSS.
Overview
You can start using the Google Font API in just two steps:
- Add a stylesheet link to request the desired web font(s):
- 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:
Your text
Note: When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
For a list of web fonts you can use, see the Google Font Directory.
Specifying font families and styles in a stylesheet URL
To determine what URL to use in your stylesheet link, start with the Google Font API base URL:
http://fonts.googleapis.com/css
Then add the family URL parameter, with one or more font family names and styles.
For example, to request the Inconsolata font:
http://fonts.googleapis.com/css?family=Inconsolata
Note: Replace any spaces in the font family name with plus signs ( ).
To request multiple font families, separate the names with a pipe character (|).
For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:
http://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 a lot of fonts may make your pages slow to load.)
The Font API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,).
For example:
http://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 the font's listing in the Google Font Directory.
For each style you request, you can give either the full name or an abbreviation; 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 any of the following URLs:
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid Serif:700
Specifying script subsets
Some of the fonts in the Google Font Directory support multiple scripts (like Latin and Cyrillic for example).
In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.
For example, to request the Cyrillic subset of the Philosopher font, the URL would be:
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
To request both the Latin and Cyrillic subset of the Philosopher font, the URL would be:
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
For a complete list of available fonts and font subsets please see the Google Font Directory.
Further reading