typekit_example

webfonts: google fonts api and typekit

With the advent of webfonts a couple of years ago, it’s now easier to write SEO-friendly content and use beautiful and modern typefaces. Lately, I’ve been evaluating using a couple of services offering hosted webfonts as I’ve been experimenting more with web design. Here I describe some examples and implementation techniques of two of these services, Google Fonts and Typekit.

Typekit

The first service I evaluated was Typekit. Typekit offers several account levels, ranging from Free to Performance at $99.99/year. The Free account limits access to a small collection of fonts and can only be used on one domain. There are several account levels in between the Free and Performance level that have varied font access and varied domain use limitations.

After signing up for a Free account, I created a kit with two fonts, shown below. I chose Fertigo Pro Script and FF Enzo Web. I limited the FF Enzo Web to only two weight-style combos to minimize the download time of the Typekit kit.

font integration websites font integration websites
A screenshot of the Typekit kits editor, where I updated my font embed settings.

After I published my Typekit kit, I embedded the following code in my <head> tag in my website, where abc123 was replaced with my kit id.

<script type=”text/javascript” src=”http://use.typekit.com/abc123.js”></script>
<script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>

Then, I uploaded my content to add CSS classes with the Typekit defined classes:

<h1 class=”tk-fertigo-script”>Some Example Header!</h1>
<p class=”tk-ff-enzo-web”>Some example paragraph text<p>

Below is a screenshot of Typekit in action. The font-families in the example are Museo and Legendum, both available in Typekit’s Free account.

font integration websites
Typekit in action.

I observed Typekit download speeds to be efficient and was happy with the Free account offers. Typekit is very affordable. The only disadvantage I found was that the Typekit emblem was displayed in the lower right corner of a website with the use of the Free account, shown below. However, you have the option to hide this emblem for the paid Typekit plans.

font integration websites
Typekit emblem on my website with a Free account.

Google Fonts

I also recently evaluated Google Web Fonts. Google Web Fonts is a free web hosting service with a collection of open-sourced fonts. I reviewed the documentation on implementation after selecting a typeface. An account is not required to use Google Web Fonts.

For this website, I chose to use “Josefin Sans”, and included the following in my <head> tag:

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

Then, I update my CSS to add rules like this:

h1 { font-family: “Josefin Sans”; display: inline; font-weight: normal; }
h3 { font-family: “Josefin Sans”; }
small { display: block; font-family: “Josefin Sans”; font-size: 14px; }

I was happy with Google Web Fonts – so happy that it’s in use on this website. Although Google Web Fonts offers a limited number of fonts, I would expect their offering to grow over time and appreciate that it’s a free service with minimal download times. The downside of Google Web Fonts is that it offers open source fonts only, so the fonts offered by Google Web Fonts will always be limited compared to other paid services.

font integration websites
Google Web Fonts in action, using the “Josefin Sans” font-family.

Conclusion

There are several other web hosting service providers available such as MyFonts.com and WebInk. From what I’ve seen, most of the paid services have similar offerings. The only disadvantage I’ve seen with using web fonts is that Chrome browsers on Windows machines have some aliasing issues on larger text, but there appear to be some workarounds to address this.