The Current State of Robust Typography on the Web – Part II

In the previous post, we looked at a few ways to better incorporate non web-safe fonts on websites.  We ended at Cufón – a great solution, but with font licensing as an issue…

Looking for a method where you don’t need to worry about licensing?

That would be Typekit. Typekit is a subscription-based solution where they host fonts that you add to your “kit.” You can then embed these fonts on domains you enter into the Typekit website.  They have JavaScript that will embed the fonts for you to use in the CSS. It’s very easy to implement, relatively inexpensive (the biggest plan is $100/year), the licensing issues are taken care of, and they have a large selection of fonts. However the JavaScript they use to drive the service is buggy in older versions of IE. If you visit the Typekit website in Internet Explorer 6 or 7 and refresh the page multiple times you’ll see that the text is sometimes replaced properly, sometimes replaced with italics, and sometimes not replaced at all. If older browsers are not on the SOW and if the designer selected a font from the Typekit library it makes a great solution. Google’s Font API, and offer similar services. Google’s is free though currently lacking in selection, and the selection at consists only of fonts. In a few months, this whole landscape may change depending on these new services.

The method Typekit uses to embed fonts is @font-face, which is a very useful bit of CSS that allows fonts to be hosted with the other website files then used in the stylesheet just like any web safe font. In fact, the only difference between @font-face fonts and regular web fonts is whether it’s reading the font file from somewhere on your machine, or on the sever with the website. It works in all major modern browsers, devices like the Safari browser in the iPhone and iPad, and even older browsers like IE5.5 and up! So what’s the catch? Well, the font will need to allow web embedding in it’s license, and like Cufón you will need to convert the font to use it cross browser – otherwise it might be the simplest and most direct method of font embedding available today. Without the JavaScript that Typekit relies on it also means that your results will be consistent when @font-face is set manually within the CSS and it even works in IE6 and IE7. It’s a great solution, and it looks like that’s where we’re heading in terms of a decent embeddable font solution.

There are websites like Font Squirrel ( that offer free @font-face licensed fonts, and websites like Fontspring ( that sell licenses for @font-face licensed fonts. In fact, many of the fonts Typekit offers are available on either Font Squirrel or Fontspring which would allow either a free font, or a one time license fee instead of the recurring Typekit subscription which can save money in the long run.

If designers select fonts from Font Squirrel, Fontspring, or other websites that allow @font-face embedding it will save a lot of time and money in the web development process. For now this is probably the best solution available, however this could change as new services are popping up all the time.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: