mindgarden

Someone in the comments on one of my posts about the Google Font API was asking:

To be honest I still do not understand why should I use Google if I can embed a font myself with just a few lines of CSS. Where is the big benefit? Speed and reliability of the server I won’t let count. (translated into english from german)

That’s a valuable question that I thought would be good to answer. So here we go.

Licensing

One of the big issues with webfonts still is licensing. If you host a font file yourself you have to really make sure that you have the rights to do so. And the responsibility is entirely up to you. Using the fonts in the fonts api you don’t have to worry about these things as they’re all open source.

Quality

Our approach with the font directory is quality over quantity. While we will be growing the number of fonts in the directory we will make sure that fonts are suitable to be used as webfonts across the supported browsers. There were some issues with the rendering on Windows when the api launched but the api can be updated with improved versions whenever necessary which means the api will always deliver the latest and most optimised version to the browser.

While shoving a font file on your own server and writing a few lines of code might be something you can do quickly, testing the font in all the browsers and OSes is not. The font api team takes care of that for you.

Less code & hassle

In theory @font-face is easy to use. In reality there are quite a few gotchas. Plus browsers expect to be fed different font formats. You need to have an SVG version for iPads (which are now supported), EOT for IE and TTF for other browsers. Webfonts for the Android browser and printing of webfonts in Chrome/Windows can be tricky. You need to get the syntax right so it works everywhere at the same time too.

The font api we tries to take care of all of that for you. You add one line of code and it deals with all the complexity in the background.

Caching

The more popular the fonts in the Google font api become, the more likely it is that users of your website already have the font cached in their browser when they get to your website. The Droid font is already used by the Government of Chile and Smashing Magazine to just name two examples. And you can expect that to increase in the future.

So if a user has been to one of those websites earlier he has to do no downloading of any font files on your page.

Webfonts landscape

For the initial launch of the font directory it relied mainly on fonts that have already been around before. But by giving font designers the opportunity to be part of the directory it this encouraged them to improve the quality of their fonts when used as webfonts and also in general. The hope is also hope to inspire more font designers to create quality fonts that otherwise wouldn’t be there and for them to have a platform.

All that said there’s nothing wrong with hosting webfonts on your own server, in a lot of occasions it just might be a lot more convenient to use the api. Also, a lot of the benefits listed above apply to other font services too and if you’re looking for a specific font that is not available under an open source license it might be worth checking them out, too.

After last week’s HTML5 session video from Google IO now the video from the session in which the font API was originally released is online. The session was called “Bringing Google to your site” and webfonts are featured from minute 37:30

Since we released the Google font directory last wednesday the response has be nothing short of amazing. Twitter was going crazy and everyone from CNN to Mr. Zeldman himself have reported about it.

What’s especially great to see is that people are already using it on their websites and what’s more, creating plugins and howtos about it. These are just a few:

• CSS-Tricks features a nice interview with Raph Levien from the webfonts team

• Design Shack have a detailed tutorial on their site how to use the API

• Paul Irish has a more detailed look at the API and created an awesome Webfont Loader demo page

• My fellow Google webmaster Melissa Louie has a great page on her website demoing what you can do with webfonts and some CSS3

• There’s already a WordPress plugin

• ...and a Drupal Module as well!

• Also there’s a little github project that let’s you change the fonts on your page using some jQuery

And if you’re not a reading person and would rather sit back and watch a video about the font directory you can do that as well:

I’ve been very excited about webfonts for a while. I genuinely think they will change design on the web quite considerably. So when I started to work for Google in January I pretty soon joined the team working on webfonts with my 20% time.

And today I’m really, really happy to see the Google Font API and Google Font Directory being launched during Google IO. The API let’s you embed free open source fonts directly from the Google servers by adding one line of code to the html header of your page.

You can find all the fonts that you can use in the font directory . We hope that this will improve the the state of typography on the web by giving developers and designers a set of free quality fonts. There’s even a javascript library that was developed together with typekit.

I consider myself very lucky to be able to work on a great project like this with an absolutely awesome team. And we’ll continue to work on improving the font directory even further for you.

http://code.google.com/webfonts/

Since I’m working for the big company now I might just as well point out a few things every once in a while:

So if you have several URLs pointing to the same page or to pages with similar content you can specify one as the preferred one by specifying your canonical.

bq.If your site has identical or vastly similar content that’s accessible through multiple URLs, this format provides you with more control over the URL returned in search results. It also helps to make sure that properties such as link popularity are consolidated to your preferred version.

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish" />

The blog post on the webmaster central blog is already over a year old now but I thought it might be worth mentioning: Specify your canonical