Typekit—Expand Your Website’s Font Library

Typekit—Expand Your Website’s Font Library

By Uncategorized 7 Comments    November 2, 2009

It has been a long wait, but I finally received my invitation to try out Typekit—a solution to the agony of being restricted by web-safe fonts. Created by Small Batch Inc., Typekit will allow web developers to write their CSS, link it to a font file, and have that font appear on their website. No more using Flash or images to convey a typographic style while sacrificing your SEO.

So, why has it taken this long to get fonts other than Arial, Times, Verdana, and Geneva on our websites? Part is due to browser technology (the ability to link to a font) and the other is due to protecting the copyright of the typeface. Like software, a typeface is purchased with a license, which means it can only be used on a certain number of computers. In the near future, all major browsers will support the ability to link to a font, so the only remaining hurdle was the licensing issue. Here’s Typekit’s explanation of what they did to make it happen:

“We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.” (Source http://blog.typekit.com)

Typekit has prepared 4 packages for their service (currently a yearly pricing discount).

1. Trial
– free
– 5GB
– Trial library (70 fonts to choose from)
– 1 website, 2 fonts
– Typekit badge required (links to a colophon page providing detailed information about the displayed fonts and the foundries and designers who created them)

2. Personal
– $24.99/year
– 10GB
– Personal library (240 fonts to choose from)
– 1 website, 5 fonts

3. Portfolio
– $49.99/year
– 20GB
– Full library (300 fonts to choose from)
– 5 websites, unlimited fonts

4. Performance
– $249.99/year
– 100GB
– Full library
– 40 websites, unlimited fonts

All are W3C standards compliant, allow advanced style control, and are fully refundable for 30 days. The servers hosting the fonts are fast and reliable, and if your site exceeds the bandwidth defined in the package (ie. if your site suddenly gets high-volume traffic) the fonts will continue to appear. If traffic remains high, you may receive a phone call from Typekit to discuss ways to adjust your service package.

The only case where the fonts may not appear and default to standard fonts (CSS Stacks) is when the browser is not compliant. All browsers supporting the CSS @font-face rule will work with Typekit. They include Firefox 3.5 and higher, Safari 3.1 and higher, and Internet Explorer 6 and higher. For those developing a site, Safari 3.1 or higher and Firefox 3.5 or higher will be required to run the Typekit application (they are currently working on including IE).

After clicking on the Trial package option, you’re prompted to provide a domain name with up to 10 URLs, including ‘localhost’ for development. Once that is done, simply copy and paste the javascript code into the head tag of the pages you want to activate then have fun browsing through the type library and choosing your site’s new fonts! Here’s what I chose—don’t forget to click on the Typekit badge!  CLICK HERE to view sample.

Read more about Typekit:
http://blog.typekit.com/2009/05/27/introducing-typekit/

http://www.webdirections.org/blog/ubiquitous-web-font-embedding-just-got-a-step-closer/

Author Oya Voices

More posts by Oya Voices

Join the discussion 7 Comments

  • rawnee says:

    Do you have any idea how to remove the typekit badge once you’ve deleted your account? I can’t get rid of mine and can’t find anything on the support site to tell me how to do it.

    TIA

  • Have you removed the line of javascript from your HTML?

  • rawnee says:

    Hi Lesley

    Thank you for your reply. I’m afraid I’m a complete newb when it comes to WP and have to admit, I have no idea how to do that. Do I have to purchase the CSS upgrade to amend the html?

    Thanks

  • Don’t worry, Typekit’s a newb on WP too. That’s likely why it’s hard to find answers in the support forums.
    I haven’t tried Typekit out on WP yet, but have looked into the steps involved in launching it. Looking at your site’s code, the javascript that makes the Typekit badge appear is still in place (to see it, go to http://dreaphillips.wordpress.com/ and in the browser menu click View > Page Source; it will be the first line of script). I’m not sure what steps you took to cancel your account, but where I would start is in the Appearance section in WordPress (in left nav on dashboard; you’ll have to log in as an admin user to edit appearance). See if your Kit ID (under Typekit Fonts in left nav) is still entered in the ID field. Delete it if so and see if it removes the badge. If not, submit a query in the WordPress and Typekit support forums. This may be something they haven’t addressed yet. Hope it works out!
    For those interested in adding Typekit to your WordPress blog, view the instructions here: http://blog.typekit.com/2009/12/22/customize-your-wordpress-blog-with-typekit-fonts/#comments

  • Andrea says:

    Thank you so much for your help. Will give that a go and see what happens. Much appreciated.

  • rawnee says:

    Lesley, you’re a star. I removed the Kit ID and the badge has gone!

    Thanks again for your help. It never even occurred to me that that could be the problem!

    A

  • Good to hear it worked! Glad I could help.

Leave a Reply