Google I/O 2010: Presenting the New Fonts API

During the first day of the Google I/O 2010 event, a certain piece of news would have made web-designers jump out of their seats with joy. Google announced its new Google Fonts API, a tool for adding non-standard web fonts on any web page.

Typography is a big part of the print industry, but nowadays people tend to think more of it as the problem in modern web design. This is mainly because browsers have been lagging behind other desktop applications when it comes to font support.

The new API from Google will enable developers to embed a series of open-source high-quality fonts on their page through simple lines of code. To do so, Google set up a new service called the Google Font Directory (still in beta) to host those fonts.

Usage:

The first thing a developer should do is load the font from the Google Font Directory by calling the API:

code

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

Once loaded, all that remains is for the developer to add CSS rules to their stylesheets to use the font-family before the other standard fallback fonts.

code

<style>
body {
font-family: 'Font Name', serif;
font-size: 100px;
    }
</style>

What happens underneath the hood:

Basically, when a font is added to Google's Font Directory, it is converted to appropriate formats so it could be served from the Google cloud to any type of browser the user might be using. Once converted, the fonts will be sent to the browser, which will then use them according to its internal display processes.

CSS3 and HTML5 effects can be applied without any worry. For now, the Fonts API is compatible with: Google Chrome: version 4.249.4 or higher, Mozilla Firefox: version: 3.5 or higher, Apple Safari: version 3.1 or higher and Microsoft Internet Explorer: version 6 or higher.

Unsupported browsers will use the next font declared in the CSS font-family rule. For now, the Google Fonts API is not supported on Android, iPhone, iPad and iPod devices.

Font Directory:

Right now, the Font Directory only holds 18 fonts, developed by different designers and famous agencies around the Globe.

The first 18 fonts included in the directory are: Cantarell (4 variants), Cardo, Crimson Text, Droid Sans, Droid Sans Mono, Droid Serif (4 variants), IM Fell (10 families), Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT (2 variants), Old Standard TT (3 variants), Reenie Beanie, Tangerine, Vollkorn (2 variants) and Yanone Kaffeesatz. WebFont Loader Library:

Firefox, Internet Explorer, Google Chrome and Safari all have different mechanisms through which they load and manage the fonts on a web page. While Internet Explorer, Safari and Google Chrome have a similar behavior (but not identical) in rendering the font (will display blank spaces across the page until the font has loaded), Firefox will display the text in the default fallback font, and re-render the page using the appropriate font after it has fully downloaded on the client's side. This behavior is called flash of unstyled text in technical circles and is considered a bug.

To aid the Fonts API in the way fonts are loaded and displayed in browsers, Google partnered with Typekit (renowned fonts marketplace), which previously researched and developed a JavaScript library to give added control in browser font renderings.

This library, WebFont Loader, provides a greater control over how browsers behave while the font is still loading.

To study the library, you can download it from the Softpedia Scripts Index at this link.

The Google Font Directory can be accessed at this link.

The Google Fonts API can be accessed at this link.

The raw fonts used in the Fonts API Font Directory can be downloaded from a Google Code project repository at this link.

Google I/O 2010