Tag Archive for: How-to

Google recently announced their new Google Font API which allows users to embed open source Web-friendly fonts directly into their designs. All it takes? A simple CSS call. But we’ll get to that in a minute.

* Of course browser compatibility is important. And, as usual, Internet Explorer is the dunce.

Anyway, let’s get on to the cool stuff…

1. Choose your font
Hit up the Google Font Directory and decide which one(s) you want. Yes, you can have more than one. Then, click on the font and check out the different levels and variants. The most important piece here though is grabbing the code. Click on the “Get the code” tab and copy that CSS link.

2. Let’s build a simple Web page for testing
Here is a link to a very simple design utilizing the Google Font Cantarell from above. Feel free to look through the code and try it yourself. You can download the code package here.

I’ll be updating this post with a few more examples as time goes on. I very much believe Google Fonts is in super beta right now. Fonts are a little messy but, after all, they are Web fonts. I’m hoping they will add a few more variations and families in the future.