May
24
2010

The New Google Font API

by   |  Posted in Articles  |  3 comments

Using the standard Web safe fonts is quickly becoming a thing of the past thanks to modern alternatives like @font-face kits and the new Google Font API. Taking a quick look through the Getting Started guide shows just how simple it is to apply the API to your Web site. All you have to do is add a link between your site’s head tags to the CSS file hosted on Google, and then you can call the chosen font throughout your stylesheet.

Here is an example of the link:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Then you can use the font like this:

<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
</style>

Check out a list of available font in the font directory. They are all licensed for commercial and non-commercial use.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
Share the love...

Tags: , , , , , , , , , , , , , , , , , , ,

Short URL: http://bit.ly/aS2wPG

Discussion 3 Comments

  1. Dave on June 1, 2010 at 5:13 pm

    Wow. I had heard about the Google Font API but I never realized that it was so easy to use! I hate having to explain to a customer that “even though you have that font, nobody else does so they won’t see it” As usual Google comes up with a great solution!

  2. Jorgen on June 2, 2010 at 4:29 pm

    Google font API is really easy to use. See additional code samples here: http://tips4php.net/2010/06/spice-up-your-site-with-google-font-api/

    However to control the user expereince in different browsers, the FontLoader API can be very helpful

  3. Jean Pascal on May 17, 2011 at 2:30 pm

    A good way to integrate special fonts into web pages.
    I have used it a couple of times and it’s pretty effective !
    Thanks