How To Set Up Typekit

All of a sudden, it seems that we're entering a new era in web design. One of the most noticeable changes (as of late) is the use of fonts that designers actually want to use outside the ever-limiting web standard ones. Among various methods, we have Cufón which is an alternative to another experimental flash embedding technique referred to as sIFR. I have experience with sIFR having used it in Willoughby Design's website where we used H&FJ's Whitney. I must say that although sIFR was a great solution, we had a bunch of licensing and security issues which we needed to take into account. With sIFR aside, we now have Typekit.

In a nutshell, according to their site, "Typekit is the easiest way to use real fonts on the web." To date and with the experience that I have with some of the aforementioned methods, this claim is very accurate.



I first heard about Typekit a few months ago before they opened it to the public and I wasn't really sure what it was at first. They officially opened up shop a little more than a week ago and I'm glad I've finally had some time to explore it.

1. Setting Up

Once I logged in, I simply had to enter the domain name that I wanted to use a "kit" in. I had to then copy and paste a short line of unique javascript code into the HTML head tags in my website. Note: The following code will be unique to your information.

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

2. I'm Done Already?

At first it seemed like I was, but not quite. After finishing our first step, Typekit says, "You're all set. Now go find some fonts!" Damn... that was pretty easy.

After proceeding, I was taken to a page of close to 100 fonts to choose from. It's a very respectable list and I imagine that the library will only grow. Very organized, you can search categories such as serif, sans serifs, to distressed and pixel. After searching, I selected a couple of my favorites. I have the basic free service which allows me to use 2 fonts on 1 domain which is fine for my purposes. You can upgrade (and pay) for more fonts across more domains.



Once I selected the font of choice (called Liberation Serif and now used in my headers), I opened the "Typekit Editor".

3. Adjust Your CSS

All that was left was for me to do was add the name of the font to my CSS [example code shown below]:

h1 {
  font-family: "liberation-serif-1","liberation-serif-2",serif;
}

The process is literally that easy. If I wasn't writing this article while doing it, it would have taken me no more than 10 minutes to get a working font on my site. And although the code adds a little badge in the corner, it's not intrusive and doesn't really bother me. If I were to upgrade my account, the badge would not be required and I'm sure if I was really savvy, I could hide it. In conclusion, I am very impressed with the selection and ease of Typekit... I look forward to new features it has to offer.

Wanna Add Typekit To Your Website?

If you're interested in joining the Typekit community, I have a limited number of invites that I'd be happy to share. Just post a comment with your thoughts and a way for me to contact you and I'll pass one along. Also, if you end up implementing Typekit on your site, let me know as I'm curious to see your use... Enjoy and thanks for reading. I look forward to hearing from everyone!