Google Font API: Why it exists and How it is useful!

Here is a rumbling about Google Font API. Why Google Font API and What is the use of it?

Web fonts are restricted by fonts available on Clients/Visitors machine. Web authors creativity is also restricted by this reason. Web authors are never sure that fonts he uses on his page is available in 100 percent visitors. So, even the widely used fonts (Verdana, Ariel, Tahoma,..) may not be available on all visitors Computers. As Window has some other default fonts then MAC and Linux system. So, for this reason in CSS2, one solution is proposed and that is @font-face. Browser can understand this and it can download fonts from the server like other media stream and use it for display.
@font-face Syntax:

<style>
@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}
</style>

First line is about name, which you will use in style. Second line is about the resource on remote server. To use this, mention the font name in your style:

<style>
h1 {font-family:<a-remote-font-name>, verdana}
</style>

Verdana font is not part of @font-face, but is used in case there is some problem at any time and remote font is not available then this font can be used.

Google Font API is just part of its Open-source structure and small freebies to help it spread itself into Microsoft's space. After saying that, I will also say that Google is also front runner in making the Web open as it should be.

Google FONT API: Example usage and demo
I want to see how a text looks in different fonts available in Google Font directory. It was not allowing Using Google Font API to call many times like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
      h1, h2 {
             font-family: 'Tangerine', serif;
            font-size: 48px;
            text-shadow: 4px 4px 4px #aaa;
      }
</style>
    <h1>Making the Web Beautiful!</h1>
    <h2>Web Scripting</h2>
<hr>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>
      h1, h2 {
            font-family: 'Lobster', serif;
            font-size: 48px;
            text-shadow: 1px 1px 1px #aaa;
      }
</style>
    <h1>Making the Web Beautiful!</h1>
    <h2>Web Scripting</h2>

Though, I latter learned that I can call and use different fonts like this:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Lobster">
<style>
      h1 {
            font-family: 'Tangerine', serif;
            font-size: 48px;
            text-shadow: 4px 4px 4px #aaa;
      }
	    h2 {
             font-family: 'Lobster', serif;
            font-size: 48px;
            text-shadow: 4px 4px 4px #aaa;
      }
</style>
    <h1>Making the Web Beautiful!</h1>
    <h2>Web Scripting</h2>

Watch the link href part: http://fonts.googleapis.com/css?family=Tangerine|Lobster. This way we are calling two fonts at a time. Another parameter that can be added is: i, b or bi. B=Bold, I=Italics and BI=Bold+Italics. Use the href part like this: http://fonts.googleapis.com/css?family=Tangerine:bi|Lobster:b.
Tangerine font will be Bold+Italics and font Lobster will be bold. What if you are going to use bold and italics both! Here is the way - http://fonts.googleapis.com/css?family=Tangerine:b,i|Lobster:b,bi
So, Tangerine will come as bold as well as italics and Lobster will come as bold as well as bolditalics.

I came to know the method latter after I have almost written the code for an application. Even after knowing the above method, I need to write different tags or perhaps class ID many times to associate different fonts with each text. When I was reading the Google Font API, I thought to code an application to preview all fonts available at Google font directory, so that I can see all fonts style at a time. and based on that I have written this Google Fonts Demo application.
Update:
Google also has a font preview application for a single font at a time from the font directory:
http://code.google.com/webfonts/preview

Comments are open for an year period. Please, write here on Facebook page.