Beyond web-safe fonts with Typekit

Posted by on Feb 28, 2010 in Tutorials | 1 comment

Beyond web-safe fonts with Typekit

Custom fonts are a hot topic in the web design world at the moment because we’ve finally reached the point where all major browsers support their use via standard CSS. Now we can link to fonts of our choosing rather than relying on what is likely to be installed on the user’s computer.

You would expect the easiest, and maybe the best, way to get started with custom fonts is to find the typeface you want and then use CSS code similar to this:

1
2
3
4
5
6
7

@font-face {
  font-family: MyFont;
  src: url(http://www.mysite.com/MyFont.ttf);
}
p {
  font-family: MyFont, serif;
}

There are three big drawbacks to this method though; (i) you must be really sure that you’re licensed to use the font on the web, (ii) the font file must be in format that’s supported by the user’s browser, and (iii) the font file will almost certainly be a very large by web standards. All of these concerns can be addressed with Typekit.

What is Typekit?

Typekit uses JavaScript to inject the necessary CSS into your web pages and makes your chosen font file(s) available for use by visitors. It offers a wide selection of high quality fonts and has free and paid packages.

Typekit degrades gracefully so that anyone without JavaScript, or with a browser that doesn’t support the necessary features, will simply revert to your standard CSS rules. The reliance on JavaScript may be considered a problem but these days it is safe to assume that all visitors will have JavaScript enabled.

The two big advantages of Typekit are that you can rest assured the fonts are being used legally, and you’re given the option to reduce the file sizes by only including the styles and characters that you need.

How does it work?

First you’ll need to register with Typekit at typekit.com. They do offer a free account which may be all you need, and it’ll certainly be enough try the service and to see if it suits you or not. The free account does require that you show the Typekit logo on your website but that’s fully understandable and their ‘Personal’ plan isn’t a lot of money if you don’t want that restriction.

Once logged in, follow the guided process of adding your website and selecting your font(s). After adding each font you’ll be greeted with the option to define which CSS selectors it should be applied to, or you can manually add it to your own CSS file if you prefer. Next you should select only the specific styles and subsets you require to help reduce its size. After that click ‘Publish’ and you’re about done – all that left is to copy the supplied JavaScript code into the <head> section of your website.

The code that’s supplied by Typekit handles all of the browser quirks to ensure your fonts are seen by as many people as possible. It calls font files that are stored on high performing servers with a claimed uptime of 100%.

The process probably couldn’t be simpler and the results can really help your website stand out. I’m using the system on this website so you can see the effect right now and it’s something that I could never have done using image or flash replacement techniques.

Browser compatibility

If you’re wondering which precise browser support this method, they are as follows:

  • Internet Explorer: 5+
  • Firefox: 3.5+
  • Chrome: 4+
  • Safari: 3.1+
  • Opera: 10+

Some browsers do behave slightly different to others, for example Firefox starts by displaying text in a standard font and then switches to your custom one once the file has downloaded, whereas Webkit browsers will wait until the font is ready before it renders anything.

Also remember that the user must have JavaScript enabled.

My thoughts

Typekit is the first service of it’s kind that I’ve tried and I’m so happy with it that I haven’t even bothered to look any further. I have to admit that I’ve always been sceptical about the use of non-standard fonts on websites because of licensing issues and overly-large download sizes; however Typekit tackles both of these concerns superbly.

As a developer Typekit offers me a one-stop shop to point web designers towards when they want to use a custom font. They’re offered a wide variety of quality options in Typekit’s library and I don’t have worry about sourcing (and maybe buying) whichever font they choose. If I could ask for one more Typekit feature though, it would be a downloadable PDF showing the entire library (grouped by style) that I could share with designers I deal with.

With tools like this, now the only thing we have to fear is bad designers abusing fonts and making websites with illegible scripts! Such websites are easily ignored though and the benefits to us professionals greatly outweigh that nuisance. If I were a teacher I’d be awarding Typekit an A+ grade.

One Comment

  1. Neupebype August 29, 2010

    learned a lot

    Reply

Leave a Comment