Wednesday, May 19, 2010

Introducing the WebFont Loader in Collaboration with Typekit

Moments ago we introduced the Google Font API and Google Font Directory. In addition to Google’s support of web fonts, we’re excited to announce a second launch: a collaboration with Typekit to open source the WebFont Loader, a JavaScript library for improving the web font experience..

Google and Typekit believe that web fonts, in conjunction with the richer text styling offered by CSS3 and HTML5, provide the visual richness and high fidelity control of print typography while remaining accessible to machines and devices.

There are still some challenges when using web fonts, and the launch of an open source WebFont Loader addresses one of these difficulties: different browsers treat the download of web fonts differently. For example, Firefox will initially render a website’s text in the site’s fallback font until the web font is downloaded, and then the text will be re-rendered and re-flowed using the downloaded web font. Chrome and Safari won’t display the text until the web font is fully downloaded, and Internet Explorer sometimes won’t render any content at all until the web font is available.

The WebFont Loader puts the developer in control of how web fonts are handled by various browsers. The API fires JavaScript events at certain points, for example when the web font completes downloading. With these events, developers can control how web fonts behave on a site so that they download consistently across all browsers. In addition, developers can set the fallback font's size to more closely match the web font, so content doesn't reflow after loading.

Furthermore, the WebFont Loader is designed to make it easy to switch between different providers of web fonts, including Google, Typekit, and others. The code is modular, and we expect to add modules for other major web font providers in coming weeks.

Google is excited to work with Typekit to further web font technology. We look forward to working with others as well to continue to advance typography on the web.


  1. To what extent is the iPhone supported? The FAQ states that it is not, but is this just the case using the Javascript loader? Using Safari on a PC with the User Agent set to iPhone displays the custom fonts, when a direct link to the CSS is being used, without the Javascript. Unfortunately, I have not got an iPhone to test this!

  2. I am using the WebFont Loader on
    Everything loads fine, however I am getting an "specify a cache validator" on Google Page Speed.

    Is it possible to do so for