Google Font API & Interview

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.

I quite like how they have done it. You just hotlink the CSS right from Google and then reference the font names in the CSS. It’s really easy — view source on this demo.

Why do this? Isn’t this just @font-face? Yep it is just @font-face, which you can do yourself without Google’s help. But there are advantages:

  1. Bandwidth savings (weight is on Google)
  2. Caching speed (same font used on multiple sites, browser cache kicks in)
  3. Speed in general (Google’s CDN is faster than your site)

Loading the extra CSS file is an extra HTTP Request though, but you could hotlink the font file instead. You may also want to download the font and create your own SVG version, because the Google stylesheets aren’t serving that up, and hence no support for iPhone/iPad.

So what is this WebFont Loader then? It’s a bit of JavaScript which handles the loading of fonts. It’s use is totally optional, but offers some advantages. For example, Firefox will display a font further down the font stack until an @font-face font is loaded, and then flip to the @font-face font when it is ready, causing reflow and general weirdness. It’s called FOUT (Flash of unstyled text). The WebFont Loader can help fight this — see Paul’s article on it.

Raph Levien is a type designer, and creator of the Inconsolata font. Raph also works on the Google Font API team. I caught up with him to ask him a few questions about all this…

*Chris: Google does a lot of cool stuff for people building websites, including some seriously bandwidth intensive things. For example, we can hotlink to JavaScript libraries hosted on Google’s CDN. The last thing I want to do is look a gift horse in the mouth, but I know it makes people wonder sometimes, what is in this for Google? Guaranteed this is going to make web fonts faster, so is it as simple as a faster web is good for Google? Or is there going to be analytic data captured that is useful to Google?

Raph: It’s all about making the web faster and richer for everybody. We’re not collecting any personal information for web font requests, and only aggregating the logs at a coarse level so we can keep track of performance and overall popularity of fonts.

One of the great things about this service, just like the AJAX libraries (such as our WebFont Loader), is that many different sites can link the fonts, and they’ll all share the browser cache – it’ll only trigger a network download for the first one.

*Chris: Should the worst happen, and the font API were to have a bit of downtime, what happens to sites using these fonts? Will the browser follow the font stack down and pick a fallback, or does something else happen?

Raph: Yes, it’ll use fallback fonts. It’s just CSS, so the designer gets full control over the font stack, and if you want more fine-grained control, you can use the WebFont Loader library as well – for example, you can trigger JavaScript code to make CSS changes when the font fails to load. We’re also going to be collaborating with all major browser vendors to improve the web font experience for users.

*Chris: It is pretty interesting to see a collaboration between your team and TypeKit. How that that come about?

Raph: TypeKit has been been blazing the trail to make web fonts available to a wide audience. We’ve known the team for a while (Jeff Veen used to work at Google, in fact), so it was natural to talk to them about what we’re doing. We think our collection of open source fonts is pretty good, but for a broader range of professionally designed fonts, we want to make it easy for people to upgrade. We’ve also been working with other major font vendors, including Ascender.

*Chris: A lot of free / open source fonts serve their creators as an advertisement for a more robust set of fonts that isn’t free. Do you see that as a hurdle for the Google Font Directory, in that could become a repository of intentionally limited fonts? Or will that kind of thing be curated out?

Raph: We’ve been getting a great response so far. People have all kinds of reasons for contributing open source fonts, and one is definitely to create more visibility and traffic for selling proprietary fonts. A lot of people just love creating fonts. Whatever the reasons, I’m confident we’ll see a nice, steady stream of high quality fonts. But there’ll always be more choice of top-quality fonts from professional foundries.

 

Thanks to Raph for the quick interview! Let me know what ya’ll think of this. I’m thinking it’s a pretty big win for web fonts, although I think (and hope, really) that all the best fonts will remain on paid services like TypeKit. Web fonts still have a way to come. Clearly there are still some problems on Windows, and if it’s not one thing, it’s another.