2010-05-25

Google Web Fonts: Bringing Typography to the Web

Designers and developers have aspired to use rich typography on the web for a long time, but it has been an elusive goal until now. In the past few months, all modern browsers have begun supporting the CSS3 @font-face standard, and this support has created the potential for a rich visual experience online.

I am excited to share that last week, at Google IO, we launched the Google Font Directory and API,  which brings a diverse collection of high quality web fonts to everyone, for the first time. 

Typography on the Web is here!

With a couple lines of HTML and CSS, designers can safely create web pages using a choice of fonts (as opposed to the standard 9 “web safe” fonts that can be expected on all browsers), preserving all the advantages of true text over images or proprietary rich media plugins: real text is searchable, accessible through screenreaders, zooms crisply, and can be translated.

There are several components to the launch:

1. The Google Font Directory : a collection of high quality open source web fonts

2. The Google Font API: a simple, cross-browser method for using web fonts, that:
  • hides browser complexity by converting the font into a format compatible with any modern desktop browser
  • serves font files and CSS that are tuned and optimized for web serving
  • works well with CSS3 and HTML5 styling, including drop shadows and rotation. You can see many sites using the Font API today. 
Here’s a few cool examples: Smashing Magazine, Little Bird LLC, and the new Google Docs Form Themes. Note: see how Little Bird LLC web fonts can be translated by Google's translation tool.

3. Open Source WebFont Loader API (in collaboration with Typekit) that lets developers control how browsers treat fonts by triggering JavaScript events and preventing content reflow after the font downloads.

Congrats to the passionate team that made this happen, especially David Kuettel, Raph Levien, Jeremie Lenfant-Engelmann and Marc Tobias Kunisch!

1 comment: