Google Font API

Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font API can be used.

Font Request Format

Many of the fonts within Google's font archive are available not only in standard format but also in Italic, Bold, and Italic Bold.  The format for requesting a given font variant is:

{font}:{variant1},{variant2}

Here are a few examples of requesting each variant:

Cantarell
Cantarell:bold
Cantarell:italic
Cantarell:bolditalic

Now let's see how we can include special fonts in our page and use these them.

The CSS Stylesheet Method

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />

The stylesheet gets included into the page like any other stylesheet would be.  A query string with a family parameter is appended to the stylesheet's URL containing the font(s) to be loaded.  Multiple fonts can be requested with the use of the "|" (pipe) character.  A few examples:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn:bold" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn|IM+Fell+Great+Primer" />

Take a moment to examine the stylesheet from Google:

@font-face {
	font-family: 'IM Fell Great Primer';
	font-style: normal;
	font-weight: normal;
	src: local('IM Fell Great Primer'), url('http://themes.googleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype');
}
@font-face {
	font-family: 'Vollkorn';
	font-style: normal;
	font-weight: normal;
	src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype');
}

The @font-face method of font embedding is Google's chosen method.  Using the font is as simple as using a system font:

.mySpecialFontClass	{ font-family:'Vollkorn', serif; }

You may also embed the font within the "style" attribute of a given element:

<p style="font-family:'Vollkorn';">Lorem ipsum....</p>

I t doesn't get more painless than that.

The Simple JavaScript Method

Google also provides a simple JavaScript method for including custom fonts within a page.  This method requires including the JSAPI JavaScript file and a very small snippet of JavaScript:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('webfont','1');
	google.setOnLoadCallback(function() {
		WebFont.load({
			google: {
				families: ['Tangerine','Cantarell']
			}
		});
	});
</script>

Selecting font variants is done with a simple ":" delimiter between the font and the variant:

WebFont.load({
	google: {
		families: ['Tangerine:bold']
	}
});

You may also load multiple fonts within the families array:

WebFont.load({
	google: {
		families: ['Tangerine:bold','Cantarell','Lobster']
	}
});

Simple, no?  If it's too simple for you, there's more advanced method.

The Advanced JavaScript Method

The advanced JavaScript method employes an async JavaScript method paired with a WebFontConfig object.  The advanced method also adds callbacks for font requests:

WebFontConfig = {
	google: {
		families: [ 'Tangerine', 'Cantarell' ]
	},
	/* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
	loading: function() {
		// do something
	},
	/* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontloading: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
	fontinactive: function(fontFamily, fontDescription) {
		// do something
	},
	/* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
	active: function() {
		// do something
	},
	/* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
	inactive: function() {
		// do something
	}
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

If you're like me, you loooooooove JavaScript callbacks.  You would use this method if you wanted to "preload" fonts before assigning fonts to specific elements. What's also great about this method is that Google uses "active" and "inactive" CSS class representations on the HTML element to designate what an element's settings should be before and after a font has been loaded:

.wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */
	font-family: serif
}
.wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */
	font-family: 'Tangerine', serif
}
.wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */
	font-family: serif;
	font-size: 16px
}
.wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */
	font-family: 'Cantarell', serif;
	font-size: 16px
}

Unfortunately you need to add these directives to you stylesheet; I prefer not to.

What do you think of Google latest JavaScript API?  On one side I see the Font API as extremely useful but the other side of me sees Google trying to grab a stronger hold of the Web;  trying to make websites dependent upon them.  What are your thoughts?