How To Use Google's Font Api With Blogger

Web fonts have become a popular web design ekspresi dominan over recent months. As I explained in a previous post, the @font-face technique can be problematic when applied to Blogger templates. But since Google have now released their font API, we're able to display non-standard fonts in our Blogger templates with ease!

Here's an overview of the Google Font API and how we can use this to enhance our Blogger-based designs.

What is Google's Font API?

The Google Font API enables us to display web fonts in any web page. We can choose to display text in a variety of high-quality open-source web fonts for both personal and commercial projects. No sign-up is required, and it's really easy to set up.

What fonts can we use?

All fonts available for use with the API are listed in Google's Font Directory. Here's a few examples of the styles we can use:

At the time of writing, there is a small selection of fonts available to use through the API. As word spreads that Google is pioneering this project, I'm sure many font developers and foundries will begin to add open source variants to the directory.

How to use the Google Font API

Using Google's Font API to display non-standard fonts is very easy, and only requires a few minutes to set up.

Firstly, you'll want to choose the font you'd like to use from Google's Font Directory. Click on the font you'd like to use to be taken to a page displaying how the font appears at different sizes.

For this example, I'll use Cantarell by Dave Crossland:

Now click on the highlighted "Get the code" tab to generate the code we need to add to our Blogger template:

Copy the embed code to your clipboard or paste into a simple text editor for later use.

Now go to Design>Edit HTML in your Blogger dashboard, and use your browser's search function to locate the opening <head> tag. Paste the embed code immediately after this line.

You will also need to add a forward slash just before the closing ">" symbol in your code, so that this:

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

becomes this:

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

This is because Blogger uses strict HTML markup and considers the original font embed code to be an open tag; the forward slash "self-closes" the tag and enables your template to be properly parsed.

Finally, save your template.

This step adds the required CSS to embed the fonts we'd like to use in our Blogger design, though these fonts will not display unless we specify the textual areas of the layout which should be changed. In order to do this, we need to add additional style statements to the <b:skin> section of our template.

For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing </b:skin> tag:

h2.post-title {font-family: Cantarell, Sans=Serif;}

I've listed a few CSS statements you could add for various text areas of the template over on this page (opens in a new tab/window).

Once you've added the style statements appropriate for your design, preview your template to see how the changes will appear. If all is well, you can proceed to save your template.

Why is this good for Blogger users?

This new API allows us to have even more control over the designs of our Blogger templates without having to register for a web fonts service or be concerned about cross-domain policies.

All of the fonts available for use through the Google Font Directory are open source. We are able to use them without restriction in both personal and commercial projects without the need to request a license.

Blogger template designers can now use these fonts to enhance their templates and be satisfied that the fonts will display as intended in the majority of browsers (admittedly, this was an issue which prevented me from including web fonts in my own designs until now!).

I also wonder if the font API will be integrated into Blogger's new template designer in the coming months...?

More information about the Google Font API

In this post, I've explained only the basics of embedding web fonts with Google's Font API. Here's some helpful resources you may like to browse for further information:

• Google Font API home page
• Getting started with the font API
• Google Web Fonts FAQ
• How to use the new Google Font API (DesignShack)

What do you think?

Will you be using Google's Font API to add new web fonts to your Blogger-based designs? Or if you are already using these techniques, did you find the implementation as simple as intended?

Please feel free to leave your comments and opinions below.