Google font api to make web better

By Avinash

January 19, 2011Web Design1 Comment

What are the Google Font API and the Google Font Directory?

The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

The Google Font API helps you add web fonts to any web page.

Benefits of the Google Font API include:

  • A choice of high quality open source fonts.
  • Works in most browsers.
  • Extremely easy to use.

To give developers a choice of high-quality fonts when using the Font API, we have created the Google Font Directory. There you can browse our catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on your web page.

The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.

How to Use:

You can start using the Google Font API in just two steps:

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

<link rel="stylesheet" type="text/css" href="http://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; }
CSS selector {
  font-family: 'Font Name', serif;
}

or with an inline style on the element itself:

Your text
<div style="font-family: 'Font Name', serif;">Your text</div>

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.

To request Multiple fonts on one call:

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|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
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Share This Article