By Kevin Yank

Web Fonts Get Real with Typekit

By Kevin Yank

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?

  • This sounds brilliant! Good work Jeffrey and Julie, I shall be watching this very closely. All the extra license issues seem unfortunate but surely there are enough free fonts available online to bypass this problem?

    Oh well for now Safari or Chrome it is. Not a problem – they’re good browsers!

  • grazz

    Damn Internet Explorer, damn damn damn!

  • Stevo

    Well done Typekit, can’t wait to have a go! It will be real liberation not choosing from the same handful of fonts all the time. :-)

    *sigh* what will it take to get rid of IE, its just ridiculous now.

  • web design leeds

    IExplorer.. oh i hate thee!!


  • ron

    I still fail to see how this “brilliant” idea is remotely tenable. Why would anyone willingly host crucial site elements on someone else’s servers? Even Google goes down. And if Typekit is allowed to host and serve fonts, why can’t I do it myself FOR FREE on my own server that I control? Why is Typekit special?

    Also, designers purchase the rights to use photos on websites all the time and anyone can easily grab those. Why are fonts considered any different?

  • DDA

    since the preexisting licenses for those fonts generally do not permit web linking, an additional license fee would seem unavoidable.

    Except that the “convert your text in the desired font into an image” method both works now and doesn’t require an additional license fee (at least for the fonts I’ve looked at). Nor does it require extra JavaScript or fail when a server goes off-line.

    Granted, it is clumsy and annoying but it works in all browsers and is free. Given that, what do I get for paying money to TypeKit?

  • Anonymous

    good news. sIFR is great software but embedding font files and using them as regular webfonts would be so much easier.

  • glenngould

    why can’t I do it myself FOR FREE on my own server that I control? Why is Typekit special?

    I agree. Only difference I see if I’m not misreading is, you won’t need to purchase a license if you use one of the commercial fonts in typekit library.

    From typekit blog:

    We’ve built a technology platform that lets us to host both free and commercial fonts…

  • Benji+

    If I’m reading Kevin’s article correctly, you could do it “for free” from your own server if you have a font that’s licensed to be linked to on the web. And if you’re willing to convert it to EOT for Internet Explorer. But it sounds like Typekit is the first to negotiate this kind of licensing large-scale with commercial font-makers. Which is a good thing, because hopefully those font-makers will see the benefit of selling web-use licenses for fonts to anyone. Because it does seem like a sort-of absurd Web-2.0 thing for a company like Typekit to start up business just to host your fonts. Still, you’ve gotta break ground somewhere, so I’m glad they’re pioneering it.

  • GM has just filed for bankruptcy so no one is immune. Typekit could disappear like any other business. I accept that this is probably the best solution at the moment, certainly better than a stalemate with the foundries, but still feels a little untidy.
    The hosting service also lacks competition at the moment, but it’s early days.

    If licensing is per-domain it’d better be really cheap. Print designers don’t need to buy a license for every poster and brochure they design.

  • It sounds to me like small companies won’t bother to pay for it and large companies will implement their own solutions – so where is the market???

  • citric

    Web font announcement over at the new Communitype blog…

  • This certainly sounds like good news to me. I agree with some of the posts above that this isn’t a panacea, but it isn’t providing a critical service: unless you are silly enough to use a font for its symbol characters then falling back to any other font still leaves your site perfectly usable.

  • cyberwhiz

    Wow! i’ve always thot of having my prefered fonts displayed on websites. I knew some guys out there were already working on something like that. can’t wait to lay my hands on typekit

  • Arlen

    Why typekit? Why can’t you do it yourself for free?

    Simple. You can’t do it for free because the type foundries want their royalties (type designers need to eat, too, you know). You can’t do it yourself because the type foundries don’t trust you not to break your licensing agreement (they don’t trust typekit, I’ll wager, either, but if they force everyone to go through typekit, they don’t have to spend so much time checking on license compliance; looking at one setup is easier than looking at thousands). And typekit gets to do it because they were the first to demonstrate a method the foundries think is secure enough to ensure they get paid.

    One question this whole thing raised for me: How long will it be before the large agencies pick up a copy of FontForge, or Fontographer, or something similar, and start building their own web fonts?

  • Amazing

    Why putting fonts other than Verdana, Tahoma or Times in a website? Any other font looks awful and very disturbing for the website visitors. Only amateruish sites would want to use other fonts. Go ahead kids, make sloppy websites with lost of clipards, animated GIFs, MIDI music, and fancy FONTS. Make your parents and family member think you are a computer genius … my customers are real ones , and want better than this.

  • kengriffith

    The majority of fonts, including “free” ones, require a paid license for commercial web sites.

    The fact that many web designers currently use these fonts without paying for them is not because they are free, but because the font foundries have not been actively pursuing enforcement and collection on their copyrights. Most websites using image replacement, etc are copyright violations.

    A professional web designer is contractually obligated to provide his clients a finished product where all images and fonts are properly licensed.

    The development of Typekit is encouraging because it will solve two problems:
    1. It will allow professional developers a much wider range of legally usable fonts in their designs.
    2. It will make it easier for font designers to be paid for their work, and therefore create an incentive for the development of high quality web fonts.

  • JoJo

    Ken I disagree when you say:

    Most websites using image replacement, etc are copyright violations.

    The problem is redistributing the fonts files to other people, if you have license for a font and you use the fonts in a similar way is like using the font on printing or in text in a image so it must not be considered a violation of license…

  • luciano991

    Two things:

    1. Designers and clients want a bigger font palette to choose from and Typekit gives it to them for a fee.

    2. Good CSS will allow the page to degrade gracefully if the servers don’t perform.

    Everybody’s happy.

  • Why would anyone willingly host crucial site elements on someone else’s servers?

    A font’s not a crucial element. If your custom font’s not available, one of your fallback fonts will be.

    Also, designers purchase the rights to use photos on websites all the time and anyone can easily grab those. Why are fonts considered any different?

    Because fonts take a lot more work to create than a photo.

  • Albert

    Try it with a secure site – won’t work – All elements under a secure site MUST be sourced from the one secure domain or else this will result in a broken padlock and a warning message about insecure elements – not good for shopping carts, secure credit apps, and that sort of thing.

  • yogomozilla

    Either :
    1. Use free (as in open) fonts such as DejaVu and Free(Sans/Sans-serif), Vera etc families. No license issues there.

    2. Create an image using Imagick or some other extension based on a font file you have on your server. Server up the image with the text in the right font face. The script can then just plant the plain text required in an alt attribute

    img src="/image.php?text=Welcome&font=FreeSans&size=12&colour=#ff0000" alt="Welcome"

    Serve it up as a transparent png (with a hat tip to IE6 if you want) and off you go. Implement some caching to avoid reinventing the wheel as well.

    No distribution of font files etc etc. No worries ;)

  • BS

    The whole fonts royalties issue is bs. Sure, it costs some time and money to make a font. But why should I pay a font foundry royalties for life to use something that had a finite creation time? I don’t charge my client royalties for life to use the website I designed for them, so what makes fonts so special? Surely it should be a one-off fee for unlimited use by one designer, enough to cover the original cost to make it + profit?

    Also, is it really fair to a client to expect them to pay this over and above their website design costs? I doubt many will understand or agree to it. And not passing it on means the web designer carries the cost for life.

    And what if Typekit goes bust, the client is left with a degraded website either way. Way too problematic on all fronts to be a serious consideration for a professional web business.

  • Dick

    The concept of royalties is dead and, as far as I’m concerned, has always been absurd. The carpenter I hire does not charge me perpetual usage fees. Nor does my tailor or mechanic. I buy a car once and do not need to pay royalties to Volkswagen each year (repairs maybe but not royalties…).

    Maybe you think web typography is different… Well, how different is it from still pictures ? Can’t we buy pictures right now and use them on websites ?

    If foundries licensed their fonts for Web usage they could make some additional money that they do not have access to right now. And if they are really scared about unlicensed use, they can build themselves a web crawler that will cross-reference the domain name where their font is used against their license database.

    Please let’s move ahead already… I remember I had the same thoughts in the last millenium.

  • mikethebee

    I have always regretted how font restrictions have limited creativity. I assume it is a hangover from printing industry restrictive practices. Ironic as I quote the invention of the “printing press” as a moment that freed people from the control of Scribes and democratized content in the same way as the Internet is doing.

    I would happily create some ‘free’ fonts if the process of encoding them was simpler, I have tried the various tools and just not had time to get my head around the complex parameter setup process. Drawing the font is the simple bit, it is creating a file of them that fails.

    The whole process of licensing anything for web use needs tackling, those who try to stay clean just end up never using other than their own creations or opensource while the others ignore all the rules. Not good for anyone really.

  • mikethebee

    Seems my previous comment was posted and then disappeared. Was there a reason it wasn’t accepted for very long? DIdn’t think is was illegal or indecent :-(

  • “The concept of royalties is dead and, as far as I’m concerned, has always been absurd.”

    Tell that to the Music and Movie industries! I think that those two have much the same problem as the Font Foundries. As for your car analogy, why do you think that car companies ‘encourage’ you to use a licenced dealer for all your servicing? And why do you think that there is specific legislation out there to prevent them going further? It used to be the case that using a third-party mechanic would void your warranty.

    Personally I think that this is a great step forward. I agree that it won’t suit everyone perfectly, but if it does nothing more than open up some sensible debate then that is surely progress of a sort?

Get the latest in Front-end, once a week, for free.