Google font API – great way to use exotic fonts on the web

G

Form the beginning of my developer’s career, I had problems with clients (and designers) which want to use this “fancy Lobster font” they found lurking on the web.

There were some solutions like sIFR, but not so elegant. Then I tried with font-face. It was working, but there is always trouble with font licenses and other stuff.

And then, Google stepped in and solved the problem. Google released a Google Font API which 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.
  • It is hosted on Google, so it saves your bandwidth.
  • As it is on the same place on the web, browser will cache them ones picked up.

It is very easy to use the API. Just add a line in your head section that will load the necessary CSS:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

And then use it in your CSS like this:

h1 { font-family: 'Reenie Beanie', arial, serif; }

You can see the font in action here.

How does the API work? When a browser sends a request for a Font API stylesheet (as specified in a <link> tag in your web page), the Font API serves a stylesheet generated for the specific user agent making the request. It basically helps developers check the browser version and inserting the proper CSS.

For best display in IE, make the stylesheet <link> tag the first element in the HTML <head> section. In IE, if the link is placed after <script> tags, the entire page will block and not display anything until the web font is loaded.

Chrome, Opera, Safari and Internet Explorer will show a blank space before the font is loaded, and FireFox will first show unstyled font. Google provides a loader which makes all browsers behave like FireFox.

Here is an example taken from Google Font API documentation:

&lt;html&gt;
  &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&quot;&gt;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    &lt;/script&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;This is using Cantarell&lt;/h1&gt;
    &lt;p&gt;This is using Tangerine!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

Visit Google Fonts API to see the list of available fonts and read documentation.

About the author

Zvonko Biškup

A passionate web developer with more than 13 years experience in PHP and other web related technology. My main interest is WordPress and new PHP frameworks.
Owner of Influendo Programming.
Enjoys exploring new stuff and possibilities, using new technologies and just having fun developing awesome stuff.

Tags