From TypeKit To Google Font API: The Road To Web Fonts

In the early 1990s when Tim Berners-Lee wrote the proposal to the World Wide Web and implemented the first web server, content reigned over aesthetics. The early days of web design didn’t consist of much more beyond a few bolded headlines, italicized words, and page breaks. There were no real choices to be made as far as how a user wanted to display text, and one certainly could not choose any particular font they wanted to use. Depending on the platform, certain fonts matched up with their respective operating system’s font choices.

Currently, this still exists to some extent. Windows users, by default, have a handful of fonts available to them to use: Verdana, Tahoma, and Arial are three of the most-commonly installed on any given system. Mac users have Helvetica available to them as a default choice, as well as Monaco. Linux users don’t have quite the same range as either Windows or Mac users, so they make up for this by using freely available fonts that are clear and concise, but aren’t as well-known as those previously mentioned.

Reaching out to all audiences

The problem with this mish-mash of choices spanning the range of different platforms is that it makes it very difficult for a web designer to pick a font that will look good, no matter who happens to be viewing their page. Traditionally, there exists a fall-back approach, and designating a font-family, such as “sans-serif” or “serif.” This will allow each user’s environment to pick the optimal font for their system, without specifying a specific and perhaps unique font that may not be available to all users.

This method is a safer way of describing the font’s implementation, but leaves much to be desired for the author to create an explicit design to look uniform across the web. Using the above-described fall-back approach, users can create a list of most-desired to least-specific fonts, naming the exact font they want first, followed by a similar font or group of fonts, and ending with a generic family. This combines the best-case scenario of using an exact font, along with throwing in “the kitchen sink” so at least a similar font is used. A better way exists: enter the web font.

The status quo of web fonts

Web fonts are designed to be use cross-platform and available to any browser that happens to come across the page. This is achieved by hosting the font itself on a server with specific calls created to reference the font. Cascading Style Sheets (CSS) are used to instruct the browser to render the fonts properly. There are a few different methods of using web fonts. The most popular ways at the moment involve using the Typekit service and Google’s Font API.


Typekit is a private for-profit company that works with foundries based around the world. They arrange the difficult part regarding licensing, proper use, and setting up the code to work properly with any system. This makes it easy for a designer to pick a font they want, write the content, and have it simply work. The simplicity of the service is an attractive draw for many users.

Typekit features and benefits

Some of Typekit’s features include an advanced style control, allowing the author to pick specific styles, different weights, and allow them to interact with your hand-written CSS. Another advantage of Typekit is their use of worldwide servers, giving the user robust network connectivity. This means that if a server happened to fail in one location, the fonts that were selected on the author’s site would still operate, being driven by another server in another part of the world. They allow the public to view their uptime statistics, and promise an uptime level of 100%.

Typekit disadvantages and weaknesses

Just as no system has all pros and no cons, there are some limitations with using Typekit. If the font you desire is not listed as an available choice in Typekit’s font directory, you cannot use it. Typekit is also not free. They have reasonable pricing structures, but every tiered plan they offer has a ceiling limit of page views. While they say that they would never shut their fonts to a user if they exceeded their limit, they would encourage them heartily to upgrade to the next level. This could be discouraging for a site that gets a normal amount of traffic but occasionally exceeds a page view limit.

Google Font API

Google has recently come out with a new service: Google Font API. This uses the same technique that Typekit has used, with an added benefit: it is free. Along with the API, Google has created the Google Font Directory, which showcases the fonts available from the API in a clean, easy to navigate site. A user can navigate through the choices available, see rendered text, and copy the code needed to run the fonts to put on their website.

Google Font API features and benefits

Like Typekit, Google Font API stores their fonts on their server, and using the Google Font Directory, users can browse choices. Unlike Typekit, the number of fonts and their availability is more limited. As of this writing, Google Font API offers less than 20 fonts. Each font has the ability to offer variants, such as bold or italic, so this does include well-rounded choices. Since Google stores the fonts themselves onto Google’s servers, this has both positive and negative connotations. The benefits include the vast power and redundancy of Google, which insures a tremendous amount of uptime and speed. Another advantage of having it stored on Google is the use of caching. If User “A” chose a particular font to use on her site, and User “B” picked the same font to use on his site, then load times would be decreased for any other user visiting both User A and User B’s site. Once their browser loaded the font into their cache, they would re-use it for the next site, saving bandwidth, which costs both time and money.

Google Font API disadvantages and weaknesses

Using Google to store and run data seems to be very beneficial. What are the downsides? The main negative currently is the lack of available fonts. This number will grow as more font authors contribute their works to be used widespread, but for now, a limited number means a smaller choice. Many web designers also feel uncomfortable relying on third-party services and servers to run their own content, even if it is a powerful server farm run by Google. The optimal choice for some would be to find a font that can expressly be used on the web, either at a cost to the web designer or for free, and then run off their own hosting provider’s server, for fast access and maximum controllability. Fortunately, with the advent of CSS’s “@font-face” rule puts web designers one step closer to the best of both worlds.

Writing the rules

Hand-writing the rules for CSS can be tricky and is an arduous task not for all, but for some people. Fortunately, there are free services out there that offer to do this legwork for you. Font Squirrel not only lets you discover free fonts to use expressly for the web, but allows you to download a complete package of the font and the CSS rules, ready to upload to your server for immediate use. The rules are written for a maximum compatibility effort to ensure your design’s intent is viewable by a large number of browsers.

CSS at-rules: @font-face

Using detailed CSS rules, designers can pick their own font independently of any service, upload it to their web space, and then call on it using declared CSS rules, allowing it to be viewed properly on most modern browsers. Currently, this rule is only fully compatible with Firefox 3.5+, Opera 10.0+, and partially with Internet Explorer 5.5 – 8.0. Chrome 2.0 does not support it, but developer versions do, indicating future support in a stable release.

Seeing the bigger picture

The actual installation and use of web fonts can be straightforward, but picking that initial font and seeing if it resembles what it looks like on paper can be an entirely different matter. Fonts that were initially designed for use on written text can look wildly out of place on a computer screen. A helpful tool with deciding what fonts to use and how they will look once in place is a web site called Typetester. This useful site allows you to compare samples of up to three given fonts laid out horizontally, even displaying popular choices for Windows and Mac platforms. The size, alignment, and color can be altered, and a wide array of weights and styles are displayed so the web designer can make an authoritative decision on the chosen font.

Choosing Fonts for the Web

Choosing wisely

Good Web Fonts is a good resource to find quality legible fonts for use as online text. Using a simple, clean layout, users can pick a web font and see a very detailed page of text that uses all different elements to showcase the font’s strengths and weaknesses. Light backgrounds, colored backgrounds, both large and small text, and altered kerning let the designer see a full range of the font’s abilities.

See what the others see

FontFonter allows a user to view web fonts on any web site available. They use high quality, screen optmized fonts and lets anyone see any given web sote in a chosen font. Using custom CSS, a user can see a selected font chosen for any web site, giving the user a choice in perceiving how fonts are displayed for a third part user at any given point in time.

Buying directly from a source

Typotheque is both a graphic design studio and a type foundry, selling licenses for using both print and web fonts. Unlike Typekit, Typotheque allows the user to directly purchase individual fonts for their own use. In addition to purchasing fonts, they offer a web font service, invoking the previously mentioned @font-face rule in CSS. Buying the font strictly for the web reduces the cost by 20%, making it a more affordable version compared to a full license.


Above all, the decision of using web fonts should be to enhance the content of a web site. Clarity should be a key element that the designer is striving for. Just because a font looks visually impressive, that does not equate to logical use of it in any given setting. Fancy italicized cursive writing is ideal for wedding invitations, classical music lists, and the like. Monospaced fonts, like Courier or Consolas, are quite at home when used for displaying programming language code. This does not mean that the designer is limited to static options, but swaying too far from the typical usage of fonts can lead to confusion and clutter.

The convenience of using a service like Typekit can be worth the price of the service. As simply as one can browse through a choice of fonts, it can be applied almost instantaneously, and with little interaction or technical know-how. The cost of using a service may be prohibitive or acceptable, based on the abilities of the client. Using multiple choices and a system that is in place for redundancy and accessibility ensures the website’s message is heard as the designer intended it.

As more fonts are made available through free services such as Google Font API, more savvy designers will use the service to greater efficiency, leading in turn to enabling like-minded sites to run with greater speed and lower costs. Using web fonts can be an easy and rewarding experience, allowing the creators of content the ability to embellish formulaic data with their own blend of creativity. As technology progresses, it will become more commonplace and hopefully easier to access this mostly-untapped realm of design.

Further Resources

Web fonts now (how we’re doing with that)

HOW TO: Implement Google Font API on Your Website

Web Typography: Font Embedding Services

The Font As Service

Web font licensing: the basic idea

Be Sociable, Share!


    51 Responses to “From TypeKit To Google Font API: The Road To Web Fonts”

    1. It’s hard to find knowledgeable people in this particular topic, but you
      sound like you know what you’re talking about! Thanks

    Leave a Reply