Typekit: Banishing Blight from the Browser

A new kind of startup—a font service provider—turns Verdana into Vavoom!

A few months ago, I complained how dreadful, drab, and unimaginative type is on the Web. Simultaneously, I recommended Cufón, an open source project capable of rendering text in most any font using JavaScript. To recap, Cufón converts a typeface into shapes and replaces the text of one or more HTML elements with an equivalent, dynamically-rendered image.

For example, the text “Welcome to Summer Camp” in the h1 element of this HTML page (pictured below) is an image generated on-the-fly by Cufón.

Cufón. offers some improvement over the ten vanilla fonts available in modern browsers, but has limitations. Namely, you must have the right to embed each font you use, and the final result is still a picture of text and not text itself.

The latter problem is likely acceptable. Since the image is rendered by the browser using JavaScript, crawlers can read the original text to index your page. The former problem is more insurmountable. Why? To date, foundries have been reluctant to license typefaces for use on the Web, because no technology protected against the misappropriation of the font.

Offline, piracy is precluded (albeit legally) by licensing a copy of the font to a particular user or machine. Online offers no such physical boundaries. If a typeface was a resource akin to JavaScript source code, an HTML page, or an image, it could be scraped with nothing more than its URL. It’s paradoxical: a font has to be public to be viewable, but must be kept private to protect against piracy. It’s a Catch-22 and it keeps the Web ghastly.


We can send a man to the moon and tweets across the universe, but we can’t render Bodoni in a browser. Sheesh.

Ah, but now we can, thanks to a startup named Typekit. Typekit offers a wide selection of fonts for use online and technology that prevents piracy. The solution is all wrapped up as a service: just subscribe, configure, embed some code, and go!

Think of Typekit as an FSP, or Font Service Provider. Typekit hosts the fonts and delivers them straight to the browser.

Getting Started with Typekit

Typekit is currently in closed beta, but I was granted early access to put the service through its paces.

As with any online service, I start by creating an account. At the moment, there are four tiers of service to choose from. A trial account is free, but limits bandwidth to 5 GB per month, and restricts usage to one site and two fonts. Your font selection is limited and per the terms of the trial account, you must also display the Typekit badge. The next three tiers offer more bandwidth, more fonts, and more liberal use.

For example, the Portfolio tier is currently priced at $49.99 for one year of service, including 50 GB per month of bandwidth, three hundred or so typefaces, and the rights to use any number of those fonts on five sites. The image below shows some of the fonts available for Portfolio subscribers. I stuck with the trial account for this article.


After choosing an account, the next step is to create a kit, or a collection of typefaces to use on a site. I chose Terfens, a pleasant, friendly sans-serif font, and Daniel, a handwriting-like face. If your browser supports the @font-face attribute, you should see a sample of both Terfens and Daniel right here:

The quick brown fox jumped over the lazy penguin.

The quick brown fox jumped over the lazy penguin.

Interestingly, after enabling the kit, this is the only code required to use the font in this site.

<script type="text/javascript">
<p class="tk-terfens">
  The quick brown fox jumped over the lazy penguin.
<p class="tk-daniel" style="font-weight: bold;">
  The quick brown fox jumped over the lazy penguin.

The magic is the JavaScript and the class attribute assigned to the paragraph. A custom font can be applied to any HTML element, class, or ID on a page, using a common CSS selector. Everything is configured in your kit, which is pictured here.


The box at top-left collects the CSS selectors for the selected face (at right). An element that matches any of the selectors is styled accordingly. You can see there are variants of the typeface in the box immediately below. And at bottom, you can choose what typeface is shown if the browser is incompatible.

And that’s it! What could be easier? How about specifying the fonts in your own CSS?

h1 {
  font-family: "terfens-1","terfens-2";

You can also include a fallback font for older browsers by listing it after the Typekit font-family values.

h1 {
  font-family: "terfens-1","terfens-2","sans-serif";

(You may be wondering why two Typekit font-family values? According to the site, each of the files is a segment that includes a portion of the font. Typekit “splits requested fonts into multiple files to make them less usable as installable fonts, and recombines them using the CSS font stack.”)

To find the names to use in your CSS, click on the Advanced link at the bottom-right of the Selectors box.

Better yet? You can cut-and-paste the stylized text.

I’m Sold!

I love Typekit! The annual fee is a pittance if you amortize the cost over a number of sites, and really is quite reasonable even if you subscribe just for your blog. The first paid tier is only $24.99 and should suffice for all but the pickiest designers.

Go to the Typekit site to get on the waiting list. My eyes will thank you.

And remember: One or two fonts per page goes a long way. Happy tinkering!
