Typekit: A review of the custom font embedding service

Typekit: A review of the custom font embedding service

One of the most exciting features of CSS3 is the ability to use any font via the @font-face property. Typekit is a subscription service that aims to make it easy for people to embed custom fonts into their websites. Read on for a quick review.

I think 2010 will be the year for great web typography. The @font-face CSS3 property allows people to embed custom fonts on their web sites. Gone are the days of only using images to display a heading with a custom typeface.

There are a few difficulties that must be addressed. The current version of most browsers support @font-face. Webkit based Safari 3.1+ and Chrome 4+, Firefox 3.5+, Opera 10+, IE 4+ support it. They all support different font formats though which makes it difficult getting a typeface to work in every browser. You also have to make sure that the typeface you want to use supports online embedding in their license. Typekit does all the tedious work for you. They actively work with type foundries so every font available on their service has an appropriate license to embed online. The fonts are also converted into all appropriate formats to support as many browsers as possible.

Pricing

Typekit currently has 4 different plans, including a free trial plan. The more you spend, the more bandwidth, typefaces, fonts per site, etc., you get.  As of this post, they have reduced pricing. If you purchase a plan now the reduced prices will last the life of your account. I think the current reduced prices are very reasonable so I signed up for the “Portfolio” plan. For $49.99 a year I get 20GB bandwidth, the full font library, use of Typekit on 5 websites, and unlimited fonts per site. I think it’s a good deal at about $4 per month. If you divide that price between multiple websites it’s even better.

Their “normal” prices, the prices currently showing with a line through them seem high. Ridiculously high in my opinion. Maybe they will change, but I say if you want the service, sign up now before the rates go up.

Typekit: Pricing Chart

Choosing fonts

After signing up you can browse the fonts available. They have a large selection of fonts to choose from and are constantly adding more. Clicking on a font brings up more details about the font. You can view the different weights and styles. The “Type Tester” allows you to type in any text you want and preview it using the chosen font, weight, style, and size. A new feature that was recently added due to high demand is the “Browser Samples”. Unfortunately different browsers render fonts differently. Internet Explorer 8 actually renders a lot of fonts terribly. Users wanted a way to preview how the fonts will look in different browsers. Under “Browser Samples” you can select which browser you want to preview the font in and it will show a screenshot. This is very handy and allows you to preview the fonts quickly.

When you find a typeface you are happy with click the “+ ADD” button to add it to your kit. At this point you can launch the Typekit Editor to prepare your kit for displaying on your site.

Typekit: Font Selection

Using the Typekit Editor

When you open the Typekit Editor it will list all the fonts you have added to your kit. In the left sidebar starting at the top you can choose what html selectors you want to apply the font to. I chose to have my headings (h1,h2) use the FF Tisa Web Pro typeface. It also lists a class name that you can give to an html element and it will use the custom font.

In the “Weights & Styles” section you can check off what weights and styles you want to use. It lists the file size next to each one so you can can keep an eye on the kit size so its download won’t slow your site down. 

Below that is the “Subset” section. You can choose the “Default” subset, which has all the common characters, or the “All Characters” subset which has every character at the expense of file size.

Lastly you can pick a CSS font stack to fall back on in case someone is browsing using a browser that does not support @font-face.

When you are all done you must hit the Publish button to save everything.

Typekit: Typekit Editor

Setting up your site to use your kit

At this point I was all excited about trying the kit out on my site in development locally on my computer. I hit refresh on my site and got nothing. DUH, I hadn’t even added any javascript to my html to use the kit. I’ll admit It took me a few minutes to find the embed code I needed. To get to the embed code you need to click the text link that says “Embed Code” in top right corner of the Typekit Editor. Adding the embed code should have been my first step but turned into my last step and was a little frustrating when I couldn’t find it.  In all fairness I think when you first log into your new Typekit account it runs through a few steps to setup the kit on your website. As I was not ready to add the kit to any site, I skipped these steps. The embed code was probably given in one of those steps. Still, I think they need to put a bit more emphasis on the link to the embed code as it is vital to the kit working.

Another step that I must have skipped was setting up which domains to use the kit. In the top right corner of the editor is the “Kit Settings” link. You must type in the domain names of the sites that will be using the kit. I typed in “localhost” as I am developing my site locally.

Make sure you click the Publish button to save all your changes and settings. I then refreshed my site again and Boo-yah all my headings were using the custom font.

Support

Before signing up for the service I took a look at the support forums to get an idea of the problems people were having. Almost every question posted had been answered or someone from Typekit was actively trying to help. I got the feeling they really wanted their service working correctly for everyone because they were just as excited as their customers about the service. It was actually surprising and little refreshing.

Should I need help with anything, I’m confident I can find help easily.

Conclusion

I definitely recommend this service to anyone who wants to use custom fonts on their websites. I would definitely get in before they raise their prices. One thing I question is how to market this to clients for use on their sites. It might be difficult to get them to commit to an annual charge just to show a “neat” font on their site. Plus, according to analytics, most of my clients are living in an Internet Explorer world. With the curent rendering problems in IE8 it just seems like more trouble than it’s worth. For now I’m using it on personal sites, but I think in the future when all the browser bugs and rendering issues are worked out it will definitely be a good option for clients.

I also wanted to mention that Typekit is backed by some of the biggest names(Jason Santa Maria for example) in the industry which gives me confidence that it will always be quality and will consistently be updated to reflect ever-changing technologies.

Slightly off topic

I almost didn’t make a blog post this week because I’ve been trying to use all my extra time to work on a new site I plan to launch soon. I think it will be the first site of its kind so I don’t want to give away too much before I launch it. When I do launch it, I’ll announce it here and will post another “design process” article featuring the site soon after. At the rate I’m going I’m hoping for a late February, early March launch date, so stay tuned!

Did you enjoy this article? Share it!

1 Comments

Gravatar for Emma T. 1 Emma T. January 02, 2012

Thanks for this write up on Typekit. I’m checking it out for use on a business website and was really impressed by the high quality of fonts they offer. Navigating html is my weak point so I appreciate your notes on embedding. Also, looks like they’ve decided to stick with their lower prices which, I agree, seem more reasonable.

Write a Comment

Commenting is not available in this channel entry.