Ben Summers | July 27, 2012
For some time now, typography on the web has been like a fast food burrito: The selections have been limited to only a few bland ingredients that may only be mixed in a few combinations. It is our job as either web designers or burrito artists to combine these ingredients together in a compelling and more visually appealing manner.
In comparison, print designers have had it relatively easy. For them, the scope of problems involved in using a font are limited to:
- Having ownership or a license to use the font
- Writing words using the font and putting them onto a piece of paper
Once the type has been struck, it is essentially there forever. The print designer doesn’t have to worry about whether the piece of paper has the font installed or if the reader of the piece of paper has a weird alternate font installed in its place that would alter the intended display of the typesetting. The web does have these problems.
The menu thus far has consisted primarily of what are known as “web-safe fonts:” Arial, Helvetica, Times New Roman, or Courier New. Sometimes a developer would get crazy and throw in a dash of Verdana or Impact or Comic Sans MS if he thought that a large enough percentage of the projected user base would have these already installed on their computers.
Using the Google Web Fonts API is a great way to add some spirit and legibility to the text of your website. Currently, there are over 500 different font families available, which is about 100 times as many fonts many of us have been accustomed to using regularly.
Today, anybody who can write an HTML <link> tag and a CSS font-family rule can take advantage of the many fonts available through the Google Web Fonts API. The usage is quite simple:
- Include a <link> at the top of your web page that retrieves the font file that you would like to use
- Add a font-family rule to your stylesheet that references the font in your <link>
- Use your new font with wild abandon.
Here is a complete, barebones, and inline example:
<!DOCTYPE html>
<html>
<head>
<!-- A font reminiscent of an old 8-bit video game -->
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Press+Start+2P'>
<!-- A font that clearly brings the thought of monkeys who are in a good mood to the forefront of your mind -->
<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Happy+Monkey'>
<style type='text/css'>
body {
background-color: black;
}
h1 {
font-family: 'Press Start 2P', ‘Times New Roman’, serif;
color: yellow;
text-shadow: 2px 2px 0 #AAA;
}
p {
font-family: 'Happy Monkey', Arial, sans-serif;
font-size: 1.5em;
color: white;
}
</style>
</head>
<body>
<h1>My Funky Page Header</h1>
<p>Whoa! This paragraph is considerably funkier than
the header that preceded it.</p>
</body>
</html>
And here is a screenshot of this page running in a few browsers installed on my computer, as well as in a couple of popular mobile browsers. In a clockwise fashion starting from the top left corner, these are Firefox, Safari, Chrome, Internet Explorer 7, Mobile Safari, Android ICS Browser, and Opera:
The Google Web Fonts API works by serving fonts in multiple file types such that each particular browser can download and render the font in the particular flavor that it prefers. These formats are:
- TTF — TrueType Font. Most Windows and Mac users are familiar with these fonts. These are the same as many fonts that shipped with your computer. Safari uses this format.
- EOT — Embedded OpenType. This is a font file format that is particular only to Internet Explorer.
- WOFF — Web Open Font Format. An emerging standard for font file distribution that has been embraced by the W3C, and is currently in Candidate Recommendation status. This format is used by Chrome, Firefox, and Opera.
- SVG — Scalable Vector Graphics. Supported on iPhone/iPad, but not as widely implemented or well supported as the above formats.
A request to the Google Web Fonts API is inspected to determine which font file format should be delivered to the web browser making the request, and only that font file format will be returned. Browser-specific, targeted rules save considerable bandwidth and are therefore faster to respond, because the browser does not have to wait for or even consider font file definitions that it cannot support or understand anyway. Here is a representation of how different browsers are served different font families, depending on who they are:
Given the surgical attention to detail of browser implementations and peculiarities and with over 500 font families available, the Google Web Fonts API clearly gives a web site designer many fonts to pick from and the peace of mind of reliable browser coverage. Google is huge and their network spans the globe, which ensures redundancy and speed. The font you picked will be viewable. This is the good part. You don’t always have to fall back to Comic Sans MS when you want to look cool.
The drawbacks are mostly practical in nature. If a user doesn’t have a font you specify already installed, then the font must be downloaded. This doesn’t usually take very long but it is dependent on the speed of the user’s network connection. While the font is downloading, the user may see a flash of unstyled content using another font that the user does have installed already, or using a default font face for the browser. But after the font that you have specified is downloaded and installed, the content will appear correctly, and the font will be cached on the user’s machine so that it will not have to be downloaded again.
Another point to make is that you don’t have to use this service if you want to use a font. If you have a font that you would like to use, and you either own it, license it, or otherwise have permission to use it on the web, you can make use of your font in a very similar manner to the Google Web Fonts API. Here’s how:
- Get or create the different formats of your font listed above. These are TTF, WOFF, EOT, and maybe SVG for completeness sake.
- Host these font formats on your own website.
- Add a @font-face definition rule to your stylesheet that references these different font formats.
- Use these fonts in font-family style rules.
The only real difference between rolling your own @font-face definition and in using the Google Web Fonts API is that you would be providing all formats at once instead of a targeted format for a particular browser that the API gives you.
Almost all fonts are web-safe these days.
This entry was posted in Real and tagged Design, technology trends. Bookmark the permalink.
