on Tips

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

2 comments
fonts
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

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:

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.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon