Google now offers a Font API that allows developers to include a limited number of @font-face-rule embedded fonts from Google's content delivery network in their projects.
The CSS @font-face rule allows a web designer or developer to embed fonts directly into a web page and, in this way, use any font for which a license is available. This technique usually has the developer include the font source files on the same web server that hosts the site using the fonts.
Google's Font API, which is decidedly simple as APIs go, allows a limited number of fonts to be delivered from Google's servers and establishes a font-loading JavaScript that makes it possible to initiate functions at various stages of the font's loading process.
@font-face
To better understand the Google Font API, it may be helpful to quickly review how to implement the @font-face rule in a more basic form.
In this example, I will use a font called Devroye that was created by Apostrophic Lab and is available for download from Font Squirrel.
After downloading the font, I placed it (four files actually) in a folder called "font," and added the following style rule to the top of my style sheet.
@font-face {
font-family: 'DevroyeRegular';
src: url('font/DEVROYE_-webfont.eot');
src: local('?'), url('font/DEVROYE_-webfont.woff') format('woff'), url('font/DEVROYE_-webfont.ttf') format('truetype'), url('font/DEVROYE_-webfont.svg#webfont0K7xQ8Ow') format('svg');
font-weight: normal;
font-style: normal;
}
This rule makes the font available to all leading browsers, including Microsoft's Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Apple's Safari. Next, I simply use the font's name in my other style descriptions.
h1, p {font-family: DevroyeRegular, serif;}
The result is that all of the copy on my example page is now rendered in the Devroye font.
Selecting Fonts from The Google Font API
The first step in using the Google Font API is to select the font or fonts you want to work with. Currently, the Google Font Directory is a bit sparse (19 fonts at the time of writing), but don't be surprised if more fonts become available soon.
Add A Link to the API
With the font selected, you need to add a link to the head section of your HTML file. In this example, I am using the font called "Droid Sans Mono", which was created by Steve Matteson of Ascender Corp.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' >
Notice that the link consists of the Google API URL for CSS and a string that identifies the name of the font family. Plus signs are used in the place of spaces in the font's name, so "Droid Sans Mono" becomes "Droid+Sans+Mono."
Next, I specify the font family in my style declaration. Note that the single quote/apostrophe is required.
h1, p {font-family: 'Droid Sans Mono', sans-serif;}
Using Multiple Fonts
I can also load more than one of the Google Font API fonts at once, separating each font name with a pipe character: |.
For example, I will use "IM Fell English" from Igino Marini for my header and keep the rest of the copy in Droid Sans Mono.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono|IM+Fell+English' rel='stylesheet'>
Notice the pipe between "Droid+Sans+Mono" and "IM+Fell+English." Next, I update my style declarations for the header and paragraph tags. I also increased the size of the header to make the font change more distinct.
h1 {font-family: 'IM Fell English', serif; font-size: 36pt;}
p {font-family: 'Droid Sans Mono', sans-serif;}
Font Variants
With the Google Font API, you can request specific variants like italic, bold, or bold italic by adding the corresponding term or initial to the end of the font name, using a colon as a separator.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono:bold' rel='stylesheet'> <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono:b' rel='stylesheet'>
In the above example, I have demonstrated two ways to get only the bold weight of the Droid Sans Mono font. Either one of the following would give me just the italic version of the font.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono:italic' rel='stylesheet'> <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono:i' rel='stylesheet'>
@import
For even better performance, you can also use the @import rule to add the Google Font API to your style sheet rather than adding an additional style sheet link in your HTML file. Just place code like the following at the top of the style sheet.
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono:b|IM+Fell+English)
WebFont Loader
The Google Font API includes a JavaScript-based loader that allows a developer to initiate actions at various stages of the font loading process. For example, you could load a more basic font so that the page became available more quickly, and then update the fonts once they had been downloaded from the Google CDN.
The first example below loads the fonts via JavaScript. The function creates a new script tag that calls the Google Font API JavaScript, passing it the names of the font families I wish to use.
<script>
WebFontConfig = {
google: { families: [ 'Droid Sans Mono', 'IM Fell English' ] }
};
(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);
})();
</script>
The API further allows me to describe styles for the "inactive" and "active" styles.
.wf-active h1 {font-family: 'IM Fell English', serif; font-size: 36pt;}
.wf-inactive h1 {font-family: serif; font-size: 36pt;}
In the example above, the serif font will be used until the IM Fell English font is fully loaded or in the event that the browser does not support it.
Finally, there are a number of available callbacks. For example, loading() is called when the font has begun to load. I could use this if I wanted to place a loading message on page. When the font had loaded, active() would be called. For each callback, I could specify an action.
Here is an example. Taking the JavaScript shown above, I add a loading callback. This callback gets an element by its id and sets the display of that page element to "inline." The element, which is hidden by default, includes a message about the fonts loading.
WebFontConfig = {
google: { families: [ 'Droid Sans Mono', 'IM Fell English' ] },
loading: function()
{
var loadMessage = document.getElementById('loading');
loadMessage.style.display = 'inline';
}
};
I can now use the active callback to hide the message.
WebFontConfig = {
google: { families: [ 'Droid Sans Mono', 'IM Fell English' ] },
loading: function()
{
var loadMessage = document.getElementById('loading');
loadMessage.style.display = 'inline';
},
active: function()
{
var loadMessage = document.getElementById('loading'):
loadMessage.style.display = 'none';
}
};
Summing Up
The Google Font API is a simple way to add select fonts to your web application or site. The WebFont Loader is a nice feature, and I am sure that you'll be able to come up with more ways to use it.
Finally, I really do think that web typography is coming of age, so whatever method you use, it is time to start using a greater variety of web fonts.
