Details on the new Google Webfont API
As you might have see, Google now offers a full webfont API. Luckily, they let me dig into the service and code a few weeks back. So let me give you the lowdown on the features and what you can do with it…
Here's adding a @font-face declaration for Tangerine, a nice scripty font:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">You'll then reference it font-family:Tangerine and be all set. As for something a bit more complicated:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Inconsolata:italic,bolditalic|Droid+Sans">There's Inconsolata regular, italic and bold-italic and Droid Sans regular.
There is a high-quality curated portfolio of open fonts available (Raph Levien, designer of Inconsolata guided this project). And view the real documentation on the CSS api.
Obviously there are huge caching benefits to using the Google Font API, plus they're very focused on performance and you can expect things to be fast and FOUT to be minimized. But on the topic of FOUT…
The WebFont Loader is also making its debut. This is a javascript library collaboration between the good boys at Typekit and Google. It basically allows a lot of control over the display details of webfonts.
Let's say you want Firefox to not have the FOUT, but rather mimic webkit's behavior of invisible text until the font is loaded:
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script> WebFont.load({ google: { families: ['Cantarell'] } }); </script> <style> .wf-loading h1 { visibility: hidden; } .wf-active h1, .wf-inactive h1 { visibility: visible; font-family: 'Cantarell'; } </style>
The WebFont Loader API provides some classes on the <html> element (a la Modernizr) and a bunch of javascript callbacks.
Check out all the WebFont demos, showing off all its capabilities. One of my favorite parts is that you can use the events and hooks it provides with your very own hosted fonts (in that demo I load Taggeschrift from paulirish.com).
The webfont loader is now an open-source project on github. Feel free to peek under the covers. Oh and do check the project docs: getting started, webfont loader, technicalities, and faq.
Ask any questions in the comments and I'll do my best to clarify. :)
2010.05.20: Update via Florian to use .wf-loading to hide for FOUT prevention.
@Alex Kahn
Subsetting in custom ways may come down the line in a subsequent release. It's something the team is really keen on tackling and making simple.
@Chad
By default that's true. However with obfuscation techniques like the WebOnly obfuscation that's in the Font Squirrel generator, anyone can serve webfonts that are uninstallable.
As you might notice, passed to the load method is a google object. The javascript library also ships with a Typekit module (just put in your kit ID, check their blog).
Hopefully other providers such as Typotheque, Fontdeck, Kernest supply code for their modules to the github project.
But there is also the custom module (see custom module demo loading fonts off paulirish.com) so you can use it with your own self-hosted fonts via fontspring or fontsquirrel or whatever. Cheers. :)
As always, I can't get through one of your posts without drawing stars on the sides. Now I have that freaking song in my head for the rest of my day. Oh, also, I somehow manage to watch the whole vid.
An aside, great post on more awesome stuff :)
Do you think the lack of subsetting support will be offset by the benefit of clients downloading cached font files? Or is subsetting planned for the future?
I'm assuming when you loading your fonts from your own server there isn't any font encryption or obfuscation?
Great news !
Great news indeed!
However, I can't get the proper variants to load using Google's Webfont API. Using
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' />should result in bold text, right?<style>p {font-family: 'Droid Serif', serif; font-weight: bold; }</style>
@David Hund
David, yup I would expect the same result. Weird.
@David Hund
On what browser did you try?
I tried your example on firefox 3.6 and chrome and it is working fine. Was it on IE? If so what version?
this is huUUUge, putting it into my next project!
So very, very excited for this. It's not much now, but it's the start of something HUGE!
Paul,
The Font API supports Mozilla Firefox: version: 3.5+.
What happens when a visitor has FF 3.0?
What does the Google server return from the request for webfont.js?
I may be wrong, but won't your solution for FOUT render text invisible for browsers (and spiders) with no javascript? In a nutshell, it's a solution that stops Google reading your content.
Adam Bankin:
You are right, the example above hides your content from search-engines. You can prevent that from happening by using
instead.
@Aaron Peters
The full webfont.js will be returned to browsers that don't support @font-face, but a UA parser will determine there isnt support and your classes will immediately go to .wf-inactive to indicate it's dead. :)
@Adam Bankin
Yeah, see Florians response. He nails it.
@Florian
True.. the loading class is attached before the document.body even loads in most cases. Fair call. I'll update the example.
Paul,
I did some tests and see unexpected and bad behavior in IE7 on Vista.
In all tests with empty cache the webfont.js is downloaded, the CSS is downloaded and the font files are downloaded, so that's good.
All my test pages work in Chrome4.
Two bad things happen:
1) the class wf-inactive is applied, but not the class wf-active.
I took a code example on the Google Font API page, uploaded it and it does not work. Here's the page.
I modified the page a bit to better understand IE's behavior, adding different color properties to the selectors. View this page. This shows clearly that IE7 gets to the wf-inactive stage.
Any idea why this is?
2) There is a long delay between the finish of page load/ and the text changing.
Is this normal behavior when using the Font API in IE7? If so, that's a big issue.
Txs,
Aaron
This is great. I have been playing with it for a couple hours now and it seems quite fast as well.
Something I can't figure out is is it possible to load all the fonts without specifying their names?
Like if I wanted to display a dynamic list with all the fonts available. Looking in the source right now, might shed some light on this.
@Ben
That's not supported right now, but its been considered for v2. :)
@Paul Irish
Thanks for the reply, I'll wait for v2 then. Just made a simple plugin for WordPress that allow you to tick the fonts you want included in your blog http://wordpress.org/extend/plugins/gfontr/.
@Aaron Peters
Same thing happens in IE6. Script doesn't apply the active state for IE6 (and IE7).
I'm seeing the same issue reported by @David Hund, in Firefox 3.6 on OS X. I'm calling Droid Sans, but setting font-weight: bold on an element doesn't bold it. Works fine in WebKit.
There's been a lot of new web standards in the nightlies for Fx.
Paul, with your JavaScript expertise you could help Mozilla and contributers convert Gopher support from C++ to JavaScript and identify other areas ripe for conversion. We need to get people off IE6 and help everyone compete with IE9!
Any idea if there will be a solution to the IE not applying 'active'
state problem? I really want to use this in a project launching next week.
Hey guys,
I've been racking my brains out for hours over this one. I'm trying to get Web Fonts working on Firefox and for the life of me I can't figure out why it's not working. You'll see an extremely simple page I've copied off Paul here. It works great in Safari and Google Chrome, yet will not play with Firefox.
However, Paul's page seems to work fine! Any help much appreciated.
It appears that Josefin Sans Std Light does not work in IE on XP or Win7. Even http://code.google.com/webfonts/preview fails to display Josefin on my test machines. The preview displays Lobster instead.
Nobile fails in a more bizarre way in Firefox, Safari and Chrome on MacOS Snow Leopard. All the dots fall off the left side of the lowercase letter i.
…and Opera on Windows seems to have problem too.
@Jay
Figured out my problem…forgot to put a www. in front of the url reference, doh!
I had the same problem trying to get the variants displaying on my site, assuming I had messed up the syntax, but http://code.google.com/webfonts/family?family=Droid+Serif#variants doesn't display properly in FF 3.6 (OSX). On my work computer running IE6 (I know – Govt network) it displays fine.
Fixed: The code Google uses has capitalised names for its fonts – all lowercase fixes the Firefox issue.
Hey Paul, I unable to access your examples. Was particularly interested in the one where you load your own fonts from your site. Could you please help?
Cheers,
kr.
FYI, your custom example doesn't work for me. I'm on FF3.6 Mac.
Turkish chars are still broken… only inconsolata works 100%… who can help us out? ?ü????ÜÖöçÇ? are not available for most of them…
Probably the best place for that is the moderator page: http://www.google.com/moderator/#16/e=66ca
g'luck!
thanx Paul…
I've found that some fonts from the Google Font API don't display properly in Chrome or Internet Explorer, I show the solution here:
http://webdesignandsuch.com/2010/07/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
Whilst I'm sure the tech behind this is pretty solid, won't Google please add more fonts as soon as possible. None of the current Google official fonts are particularly good looking/useable at the moment IMHO. Font Squirrel is a better option at the moment, and it supports SVG for iPhone/iPad too.
This is pretty exciting news however I noticed when I tried to implement this on a project that the FOUT in FF was indeed hidden, however there was a briefer flash that appeared on every page. I think the flash was the result of going from loading to active very quickly. So two questions.
1. Is there a way to bypass the check once you have the fonts locally (I doubt it).
2. Can you recommend a way to target just FF?
Cheers,
Eric
Without the ability to get a list of the available fonts to display to the user, this is totally useless from a interface perspective. Expecting your user to know the name of the font already is ridiculous.
Seriously, when are they going to add an API call to just get a list of the fonts? This should be super simple and easy.