/api, CSS, font, Google, HTML, Tangerine

Google font api and font directory

Google just made our life much easier by announcing Google font api and Google font directory.
Using custom fonts on your website is as easy as adding two lines of code. Lets consider this simple example.

<html lang="en">
<head>
    <title>Custom fonts</title>
    <meta charset="utf-8" />
    <style>
      p {
        font-size: 48px;
      }
    </style>
</head>
<body>
    <header>
        <p>Hello world!</p>
    </header>
</body>

Nothing fancy here, result as expected:

Hello world!

Now lets add those two aforementioned lines. Line 6 and line 9 in below listing.

<html lang="en">
<head>
    <title>Custom fonts</title>
    <meta charset="utf-8" />
    <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
    <style>
      p.tangerine {
        font-size: 48px;
        font-family: 'Tangerine', serif;
      }
    </style>
</head>
<body>
    <header>
        <p>Hello world!</p>
    </header>
</body>

and the effect:

Hello world!

The font directory is a bit limited at the moment but I think we can safely assume that Google will be adding more fonts over time.