Web Fonts Get Real with Typekit

Web designers want access to a greater range of fonts in web design. They’re about to get their wish.

Recently I wrote that the problem of bringing commercial fonts to the Web could only be solved by people choosing to avoid the shouting match and instead doing something positive. Two people who have chosen to do exactly that are Jeffrey Veen and Julie Hamwood.Bryan Mason, Ryan Caver, and Greg Veen (Julie Hamwood is helping out with some market research).

Jeff and Julie last week announced Typekit. Launching in the next few months, Typekit aims to solve all of the problems that currently prevent web designers from using commercial typefaces in their designs.

By the time Typekit launches, every major desktop browser will support linking to custom fonts from within your site’s CSS using @font-face. You can then use these fonts on your web site without users having to install the fonts on their system beforehand.

Safari 3.1, Chrome 2, Firefox 3.5 (coming soon), and Opera 10 (coming soon) all support linking to TrueType (.ttf) or OpenType (.otf) font files stored on a web server. Here’s how this looks in your CSS code:

@font-face {
  font-family: "Custom Font";
  src: url("CustomFont.ttf") format("truetype");
}

The only problem with this is that commercial font vendors have so far been unwilling to license their fonts for use in this way.

To address this, Internet Explorer 4 and above also support @font-face, but require the font first to be converted into Embedded OpenType (EOT) format for the browser to read it.

@font-face {
  font-family: "Custom Font";
  src: url("CustomFont.eot");
}

Up until now, the only practical way to generate an EOT file has been to use Microsoft’s Web Embedding Font Tool, which has a reputation for being both unstable and difficult to use.

For those playing along at home, here are the obstacles that remain:

• Font vendors have not offered licenses that cover linking to .ttf/.otf files.
• Internet Explorer only supports a nonstandard file format, which requires slightly different CSS code.
• The file format that Internet Explorer requires is difficult to generate.

When it launches this summer, Typekit will address all of these issues.

Typekit will host the font files on its own speedy servers, and will only serve them to sites that have paid for them (in the case of paid fonts). Greatly preferable to a new font file format with anti-theft protections built in, this simple measure was enough to allay the fears of a number of font foundries (yet to be announced) who have signed on to distribute their fonts through Typekit.

To support Internet Explorer, Typekit’s servers will automatically generate the EOT versions of the fonts alongside the TrueType/OpenType versions supported by other browsers. Designers will be able to embed a simple <script> tag in their sites that will automatically adjust the standard @font-face declarations in the site’s style sheets. Although the details remain to be announced, I expect that developers who wish to avoid the performance penalty of an additional script will be able to code the @font-face switch server-side if they wish.

The announcement promises that Typekit will launch with a free service level in addition to the paid service and a “professional version” to come later. Exact details of pricing and the charging model (Subscription or one-off font purchases? Per request? Per font?) have not yet been announced—indeed, we’re told they’re still figuring out the details.

Response to the announcement has been overwhelmingly positive, but a few designers have voiced some concerns. With the fonts hosted by a third party, outages in the service will see sites lose their custom fonts. In the long term, there is also the potential for any web service to go away, which would again leave sites “fontless”. Both of these issues can be mitigated with careful selection of fallback fonts, which will be necessary for older browsers that don’t support font linking anyway.

Some designers seem unhappy that they will have to purchase new licenses for fonts they “already own”, but since the preexisting licenses for those fonts generally do not permit web linking, an additional license fee would seem unavoidable.

If Typekit and solutions like it are successful, we can hope to see Internet Explorer support the standard font formats in a future release, since their stated reason for not doing so up until now has been that commercial fonts have not been licensed for web use in those formats.

Perhaps more significantly, a thriving system for licensing commercial fonts on the web will hopefully spur a renaissance in the world of high-quality screen font design. Currently, most commercial screen fonts are designed primarily for print, and may not be suitable for use on whole paragraphs of text on the Web.

Do you have a favorite font that you look forward to using on the Web?