joeymarburger

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.

Resources:
Google Font Directory
Google Font API: Getting started
Google Font API: WebFont loader Javascript library
Google Font API: Technical Considerations*

* 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.

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

You can also select different styles (regular, bold, italic, etc.) which will add on the extra parameters to the link.

Looks like this:
<link href=’http://fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic’ rel=’stylesheet’ type=’text/css’>

And if you’re feeling the @import, feel free to do this:

@import url(http://fonts.googleapis.com/css?family=Cantarell);

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.

Stay tuned.

After almost three years with Gannett, two and a half at The Indianapolis Star and six months at Gannett Co., I decided to take a position in The Washington Post newsroom as a designer for mobile and new digital products.

The role is a very new position created under news design director Justin Ferrell. I will also be working along innovation editor Sarah Sampsel. Awesome people.

With one day on the job I’m already seeing great work on the horizon. The team is fantastic. The energy for change and new products is cranked to 11. And the intelligence of the team is top notch. But the most exciting thing is being back in a newsroom. It already feels like my days at IndyStar.com. Everyone has a common goal to put out the best news of the day and there isn’t as much abstraction. I like that.

I’m getting the orientation and settling in bits out of the way this week. Then Cas and I will be getting the final move done next week. After that, it’s ground, meet running shoes.

Stay tuned. It’s gonna be huge!