Some time ago, fonts used on websites were limited in practice to font families that were widely available such as Arial, Verdana and Times New Roman. This is because web browsers, like most other applications on a person’s computer, by default have access only to the fonts stored on that computer. But wait you ask, isn’t web content defined and styled by the websites themselves, rather than individual computers? This is true, but text that is rendered as font (as opposed to being embedded in images) relies on the font libraries available on each individual computer to be styled properly.
Operating systems come pre-installed with a set of standard fonts, but that set differs between OS platforms (e.g. Apple vs Windows) and even between versions of the same OS (e.g., Win XP vs Win 7). On top of that, not every font is suitable for easy reading in a web browser on screen. The result was that web designers generally stuck to using fonts that they could be reasonably sure would be available and render consistently on the vast majority of users’ computers.
Today however, there are ways to reliably incorporate non-OS based fonts into website designs. Font dealers such as Fonts.com and Typekit offer subscription based services that allow designers to embed font families into websites as external resources. Effectively this instructs the browser to retrieve a particular font or fonts from the online provider, as opposed to solely from the OS font library.
Google Web Fonts
Another such provider is Google Web Fonts, which offers a similar service but with the added benefit of requiring neither a subscription nor even an account. Instead, a designer simply browses the publicly available Google font library and embeds the link to the desired font resource in the website, allowing any text elements on that site to be styled using that font.
Google’s service does not include nearly the number of fonts that the pay services offer (at this time, Google offers 613 font families, while Fonts.com advertises over 20,000 web fonts). And all of its fonts are open source fonts, meaning that the standard typefaces familiar to print designers are generally not available. Instead, the library includes custom fonts created by designers for open source distribution and generally optimized for use on the web. Thus, Google’s service is a good solution for someone looking for a cheap and easy way of adding custom typefaces to enhance the look of a website.
How to Use Google Web Fonts
Here’s how to get started:
- Visit the Google Web Fonts library at http://www.google.com/webfonts.
- Browse to find a font style that works for your site. The interface allows you to search font names and use a number of filters to narrow down your options.
- Once you’ve found the font style you want, click the Quick-Use button to select it. (Note: you can also create a collection in order to group multiple font styles into one resource.)
- Select options and copy the embed code:
- Depending on the font family you choose, there may be individual font style options to choose from (e.g., normal, bold, italic). It’s best to choose only the versions that you plan to use, since each additional style will slow page load time. Google provides an easy-to-read gauge to see how the load time may be affected.
- You will also need to choose which character sets you want. For most fonts being used on English-language sites, Latin is all you will need.
- Copy the final embed code and paste into the head of your website. Google offers three options for doing this — the standard <link> option should work fine for most basic implementations.
- Start using the font by adding the font-family name to you stylesheets.
For more information on how to customize embedded fonts through Google Web Fonts, see https://developers.google.com/webfonts/docs/getting_started