The website is among the most iconic technologies of the 21st Century but, as any web designer will testify, the typographical capabilities of modern web browsers are stuck firmly in the 1990s. In essence, if you want your fonts to appear broadly the same in all browsers, you’re limited to a selection of around a dozen viable fonts . Over the past few years a number of workarounds have been developed, the most notable and widespread being sIFR, a Flash technology that involves embedding the fonts in a SWF. Widespread but hardly ideal.

In principle, salvation is at hand with the almost complete adoption of the CSS @font-face property by modern browsers. This makes it possible to download a font stored on your server into the user’s browser. Theoretically, this solves the entire problem but, in practice, copyright issues mean that even free fonts cannot be used legally in that way. This may change over time but, in the meantime, web startup Small Batch has developed an ingenious solution called Typekit.

Small Batch has negotiated agreements with a number of type foundries which enables them to store the fonts on their servers. These fonts are inserted into your site on the fly using some Javascript based on the lovely jQuery library. Once downloaded they sit in the user’s browser cache so any delay in viewing the first page on the site is not repeated.

The process of setting your site up for Typekit is simple enough. Register for an invitation (or blag one from an existing user) and, once you’re granted access, you’re taken to a control panel listing all the available fonts (over 250 at present).  Typekit has four membership plans, one of which is free, but the best value plan is the $49.99 yearly option which contains plenty of bandwidth allowance, the full font library and allows you to access the fonts from five websites.

From the control panel, you set up one or more fonts for each of your websites. Typekit then stores this as a sort of library that applies only to that site. You then use standard CSS font-face terminology to attach the font to a style in the normal way. Finally, you need to insert a little Javascript into your web pages and the job is done. If, for example, you’ve specified that <h1> tags should be in “Bello Pro” you should now see your headings displayed in a nice flowing script.

The service works well. Performance is good, as long as you limit the number of fonts and variants to the minimum you require. I’ve found the occasional glitch with certain .co.uk setups but it works perfectly for my Wordpress-based blog where I’m using one Typekit font for the body and another for all headings.

What happens if the user has Javascript disabled? In that case, the visitor sees the backup font you’ve specified in the usual way. The same happens if they use a non-supported browser but given that Internet Explorer is supported from version 6, this is only likely to be the case if they’re browsing in Firefox 3.0 or lower: 3.5 works perfectly. Google Chrome doesn’t support this technology yet but, looking at my server logs, I reckon approximately 85% of my visitors will see the new fonts automatically. The others get the best possible backup font.

I like the service: it’s not perfect and you could argue that it’s just another workaround for the archaic copyright laws in force around the world but, if it is a workaround, it’s a good one.