Want access to over 530 free web font families? Good, then you need to know about Google Web Fonts; it is a part of the Google Developer API and provides access to high-quality web fonts that you can use in your web page documents. Not only can you use the fonts on your websites or blogs, but they are also downloadable to your PC or server for use in local programs such as desktop publishing or imaging software applications.

Several benefits of using Google Web Fonts include a wide selection of high quality open source fonts, compatibility with just about every browser and mobile device, and an easy implementation.

The Google Web Fonts API is compatible with the browsers listed below, and if you have any users still enjoying an early version of IE, you might want to help them upgrade.

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

The Google Web Fonts API works consistently on a vast majority of current mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod); however, support for earlier iOS versions is limited.

Using the Google Web Fonts API

#1 Select the font you wish to use from the Google Web Fonts library.

In this case, I selected Open Sans. Two options include either selecting the Add ToCollection button and then select Use from the footer at the bottom of the page, or open the “Quick Use” icon, which will get you there also (shown at right).

#2 On the “Quick Use” page you can choose which style you want.
You can select one or all, however, using too many font styles can slow down the rendering of web pages, so be sure to select only the styles you will actually be using. In the Open Sans demonstration the default style is Normal 400, as shown in Figure C below.

Figure C

#3 Select the code to add to your website with three options: Standard, @import, and JavaScript.
To embed your font into your web page, just copy the selected code into the <head> of your HTML document. In this case, I selected the standard code for the stylesheet link as displayed in Figure D below.

Figure D

And added to the HTML document <head> appears as such:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Along with the local stylesheet link reference:

<link href="styles.css" rel="stylesheet" type="text/css" />

#4 Integrate the font into your CSS stylesheet for any content you want to be associated with that particular font.

The sample CSS code snippet is displayed below:

h1, p { font-family: 'Open Sans', sans-serif; }

As the live HTML document is viewed in the browser, it will pull down a copy of the Google stylesheet so that the styles will be rendered as you selected them during the Quick Use steps above. In this case the Google CSS code for the Open Sans font with normal styling and font weight of 400 is displayed below:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

The demonstration HTML output is displayed in Figure E:

Figure E

Advanced techniques

Google WebFont Loader is the JavaScript library that provides you with more control for loading Google Fonts API, and allows you to use multiple web-font providers, which was co-developed with Typekit. Using the WebFont Loader does require some knowledge of JavaScript; if you want to incorporate these features then you should review the documentation on implementing the WebFont Loader configurations; however, I will review the advanced techniques in another segment soon. The HTML and CSS file is available for download.