Google release a Font API & Directory for web developers

Today Google has released something very interesting, a Font API and directory that offers high quality open source web fonts for web developers. At first glance these fonts are extremely easy to integrate with just a few lines of code needed.

The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers.

The interesting part of the subject of baking fonts into images and using font replacement scripts is actually how ‘searchable’ they are. Now with Google Font API you should be more comfortable in the fact that if Google have developed this, they ‘must’ be search engine friendly… right?

How to integrate the Google Font API

Getting started using the Google Font API is easy. Just add a couple lines of HTML:

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

body { font-family: 'Tangerine', serif; }

Google explains more

The Google Font API hides a lot of complexity behind the scenes. Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving. For example, cache headers are set to maximize the likelihood that the fonts will be served from the browser’s cache with no need for a network roundtrip, even when the same font is linked from different websites.

These fonts also work well with CSS3 and HTML5 styling, including drop shadows, rotation, etc. In addition, selecting these fonts in your CSS works just the same as for locally installed fonts, facilitating clean separation of content and presentation.

The fonts in the Google Font Directory come from a diverse array of designers, including open source developers and highly regarded type designers, and also include the highly acclaimed Droid Sans and Droid Serif fonts, designed by Ascender Corporation as a custom font for Android. We invite you to browse through the directory and get to know the fonts and designers better. Since all the fonts are open source, you can use them any way you like. We also have a separate project hosted on Google Code for downloading the original font files. Since they’re open source, they can be used for just about any purpose, including for print.

We’re hoping designers will contribute many more fonts in coming months to the Google Font Directory. If you’re a designer and are interested in contributing your font, get in touch with us by completing this form.

To showcase the Google Font API, Smashing Magazine has relaunched their site using the open source Droid font hosted by Google. We’re excited about the potential for integrating the Google Font API into many types of publications and web applications. For example, the new themes for Google Spreadsheet forms are a great example of a rich visual experience using web fonts.

This is just the beginning for web fonts. Today, we’re only supporting Western European languages (Latin-1), and we expect to support a number of diverse languages shortly.

Google Font Directory

A seemingly small number of fonts currently available, but we’re sure it won’t be long until that grows.

Google's Font Directory

Font page

As we have come to expect from Google, the font page is simply laid out. A font summary followed by four tabbed areas, Specimen, Character Set, Description and Get the code.

Google font directory font page

Useful Links

Gary Hartley

Gary Hartley is The Floating Frog. A seasoned freelance web designer with skills in UI/UX, CRO design, WordPress, branding, PSD-HTML conversions and more. Got a project you need to start or take to the next level? Please, get in touch!