This post was last updated over a year ago, therefore the contents of this post may be out of date.

If you haven’t heard this great news that everyone’s favourite company Google has introduced the Google Font Directory and Google Font API. This is a free web service that allows website owners the ability to utilise other fonts outside of the Web-safe fonts infrastructure in an easy, convenient and efficient way.

Further more due to the operations that is being performed behind the scenes at google, these custom fonts will even be recognised all the way back to Internet Explorer 6 and I for one are extremely excited about the possibilities.This including the font catalog is surely to continue expanding over the coming years.

If you decide to use Google’s Font API, here are some of the things you’ll be able to take advantage of.

  • Keep using HTML text
  • Web accessible
  • Using Google servers (save on bandwidth & caching benefits)

How To Use Google Fonts API in 2 easy steps

Step 1: Add the Stylesheet Link with Your Preferred Font

Search Google’s font collection to see what available fonts you can use. The basic format for including a certain font on your own website is

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

Step 2: Use the font to style your HTML elements

Select your elements you want to assign. Example your elements the font called
‘Font Name’ using the font-family CSS attribute and as you see down below I also included the serif as a fallback font, this means if anything wrong with google servers your browser will it default serif font.

h1{
    font-family:'font name',serif;
}

Example

Here’s an example. Copy and paste the following code block into an HTML document, save it, and then open in your web browser.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz">

h1{
     font-family: 'Yanone Kaffeesatz',serif;
     font-size: 42px;
}

</head>
<body>
  <h1>The Creative Project</h1>
</body>
</html>

Result:

The Creative Project - Google Fonts API

Share

Using Google Fonts API – You Will Love Them Even More