How to Use Typekit For Dynamic Font Replacement

Typekit

Brunello just received our Typekit invite yesterday and I thought I would share with you how easy it was to get Typekit up and running on a demo page.

Check out the simple demo we created using the typeface “Skolar” from Type Together.

Fist Impressions of Typekit

After logging in and tinkering with the free account for a while, I was initially frustrated with the lack of decent fonts. Of course Typekit offers you a much better selection of typefaces for the paid accounts - So I bit the bullet and upgraded to a paid account.

Now when I log-in I’m greeted with hundreds of lovely typefaces ready for use on our website.

Once you select a typeface the Typekit editor pops open in a new window you can then add a class name that will specify the use of the Typekit typeface.

If you click on advanced options you can see how Typekit specifys the font-family in CSS. In order to prevent sneaky type thief’s Typekit splits the type-family into two files and then combines them in the CSS font stack.

Another feature to note is the size of your ‘kit’ in the lower left of the editor. I’ve opted to only use one typeface in order to reduce the size of my kit. Adding several fonts and weights of fonts can easily increase the kit size to 300k.

Implementing Typekit

We have spent quite a bit of time implementing SIFR on client websites in the past - So we were amazed at how easy it was to implement Typekit.

The first step involves throwing a few lines of javascript into the head of your page:

If you want to assign the typeface selectively you can just add the class you specified in your editor:

You can also add the typeface via the font-family css-selector:

Pros and Cons of using Typekit

Pros

  1. Typekit web interface is easy to use
  2. Easy to implement without a steep learning curve (like SIFR)
  3. Makes web designers and typefoundries happy at the same time
Cons
  1. Wont work for people that have JS turned off (but degrades gracefully)
  2. Reliance upon Typekit servers
  3. Set up on a monthly fee based pricing scheme
  4. No support for Internet Explorer (Although Typekit plans to add IE support in the near future.)

What do you think?

Is Typekit the way of the future for web type? Would you use it? Why or why not? Leave a comment and let us know what you think!

Tags: , , , ,

Thursday, August 27th, 2009 Design, Development, Quick Tips, Web Design

3 Comments to How to Use Typekit For Dynamic Font Replacement

  1. Interesting, thanks for the tutorial. I’m excited to see a strong push for web typography - I would use it.

    2. Mindy on October 26th, 2009

  2. [...] on TypeKit by Brunello Creative (blog) TypeKit (website) Type Together : Type Foundry (website) ▶ Comment /* 0) { [...]

    3. typekit « ml's blog on October 26th, 2009

  3. Thank you for useful info. :-)

    4. finance personal software on August 11th, 2010

Leave a comment

Brunello on Twitter

Check out some of our latest Drupal development work: http://t.co/LarRYKKb, http://t.co/gCusK4Pt, http://t.co/SUFr6lZp, http://t.co/kKX67C8F

Email Subscription

Categories

Archive

Tag Cloud