Google Fonts

css-font - done reading

What is Google Fonts?

It is a collection of fonts. I NEED TO ELABORATE ON THIS.

How can I use Google Fonts?

1. Add a stylesheet link to request the desired web font(s):

<link rel="stylesheet" type="text/css" href="">

2. Style an element with the requested web font, either in a stylesheet:

CSS selector {
  font-family: 'Font Name', serif;

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 fonts, see

How can we request multiple fonts?

To request multiple font families, separate the names with a pipe character (|). For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

<link rel="stylesheet" type="text/css" href="https//|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.)

How can we request other styles and weights?

The Google Fonts 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:,bolditalic|Inconsolata:italic|Droid+Sans

To find out which styles and weights are available for a given font, see the font's listing in

For each style you request, you can give either the full name or an abbreviation; for weights, you can alternatively specify a numerical weight. See

  1. italic: italic or i
  2. bold: bold or b or a numerical weight such as 700
  3. bold italic: bolditalic or bi

For example, to request Cantarell italic and Droid Serif bold, you could use any of the following URLs:

How can we specify a script subset?

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:

To request both the Latin and Cyrillic subset of the Philosopher font, the URL would be:,cyrillic

How to optimize your font request?

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you'll need. This often occurs when you're using a web font in a logo or heading. In these cases, you should consider specifying a text= value in your font request URL. This allows Google to return a font file that's optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

To use this new beta feature, simply add text= to your Google Fonts API requests. For example if you're only using Inconsolata for the title of your blog, you can put the title itself as the value of text=. Here is what the request would look like:

This feature also works for international fonts, allowing you to specify UTF-8 characters. For example, ¡Hola! is represented as:!

There's no need to specify the subset= parameter when using text= as it allows you to refer to any character in the original font.

How can we enable font effects?

When making headers or display texts on your website, you'll often want to stylize your text in a decorative way. To simplify your work, Google has provided a collection of font effects that you can use with minimal effort to produce beautiful display text.

To use this new beta feature, simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like:

To use the effect, add the corresponding class name to your HTML element(s). The corresponding 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>

How can we request multiple effects?

You can request multiple effects by separating the effect names with a pipe character (|).|3d-float

See for a list of font effects (about 2/3 of the page)

There are many more ways to style your fonts, and many things are possible through CSS. We are simply providing a few ideas to get you started. For more ideas, try Google searching "css text effects" and browse through many of the ideas that are already on the web!

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License