How to use Google Font API

20 May 2010 by Rick ~ 4 Comments 2050 views

Yesterday Google released the Google Font API and the Google Font Directory.

One of the most amazing things I ever seen related to the CSS fonts.

With the Google Font API you can easly add any font from the Google Font Directory to your site.

How it Works?

You have to place the stylesheet link wich includes the font you want.

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

And then you use it in your style.

Notice you have to use the same name in the link and in the style.

(in this example Reenie Beanie)

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

Look at the image how it would show:

Wich Browsers can see the fonts?

All modern browsers even Internet Explorer 6, what an amazing world ;)

Google Font Directory

I’m looking forward more fonts and I’m sure they will add them.

When you go into a font it shows lot of information about how it will look like

Oficial Sites:

Subscribe by E-mail:

« »

4 Comments

  1. Two days ago I was using Museo with @font-face, This is an AWESOME alternative, But I think I’d download the script instead of letting google host it.

     
  2. If you run the stylesheet url

    http://fonts.googleapis.com/css?family=Reenie+Beanie

    It prints:

    @font-face {
      font-family: 'Reenie Beanie';
      font-style: normal;
      font-weight: normal;
      src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
    }
    

    And then again it has an other URL wich it use:

    http://themes.googleusercontent.com/font?kit=….

    I think the point is not having to download the all format fonts into your host.

    PD: forgot to write about the browsers. I just added it works on IE6 :P

     
    • That was exactly what I was looking at, and I had already tried to download both scripts. I find very useful that it works with only one declaration, but I still would feel more comfortable with the font in my servers.

       
    • I feel the same JMLeon but after all I think it will be better for new updates. You will not need to upgrade your Google files.

       

Add a Comment

Use [code] example piece of code [/code] to insert code into your comment.