What designers must know about web fonts

I can get mad at font-foundries because I believe their licensing models for web fonts are a scam. But I can also get mad at designers who still don’t know this and just keep on using custom fonts in their Photoshop mockups without understanding what this means. That’s why I wrote this article. For designers to understand the issues with font-licenses. I’ll try to explain what happens if we want to use a font from, for instance, MyFonts. Eric Eggert rightly pointed me in the directions of some errors in this post. I have corrected these errors, and nuanced the article here and there.

Technically there seems to be no problem. You can download the fonts, place them on your own server and you’re done. There are some major issues though.

You are not allowed to change the font-files.

This means that you are not allowed to optimise these files. Most good fonts are filled with exotic characters, for very specific conditions. For instance, there are many, many special characters in the Dutch, Hungarian, Icelandic and French language that are never used in English. These characters are all included in these font-files. Font-files can get pretty big because of this. 250KB is normal, 600KB is no exception. Now, what happens when a person is trying to access your site. As long as the font-file is not downloaded, most browsers will not show the content that should be rendered in this font. This is a major issue on unreliable connections, where heading just remain invisible. This basically means that if the license doesn’t allow you to optimise the file, it’s not suitable for the web. This means you should not use a service that doesn’t allow you to optimise font-files. You can actually optimize the fonts on MyFonts with an online tool they provide you. This means that you can optimize the font as long as MyFonts exists. You are not allowed to optimize fonts with other tools.

You have to include a tracking script

This one was new to me. Fonts have always been licensed on a per CPU basis. This means that you pay for each computer that actively uses the font. So if you have a license for five CPU’s, five people in your organisation may work with the font simultaneously. This idea has been literally translated to the web. You have to pay for the amount of people who access your website. As far as I know this is the only industry that does this. There are two major issues with this requirement.

1. Price

This can get very, very expensive. I know of one big site that was presented a bill of six hundred thousand euro a year. For the use of a font they intended to use for headings. There is just no way anybody can justify a price like that. This is crazy. But you have to know, as a designer, that right now, font-foundries are insane. So never, ever use a font in your mockups if you are not absolutely certain that the price is acceptable.

Another big site I know actually pays fifty thousand euro a year for a 600KB font that they are not allowed to optimize. That’s an incredible sum. And the result is a worse experience because of the file size.

2. Security

But there’s also a major security issue. You have to place a script on your website. A script that is hosted by the font-foundry. The foundry could change this script so it starts tracking more than just page-views. That’s a real privacy concern.

But they could also completely alter the script and start serving banners on your website, for instance. Nobody should ever take a risk like that. So as long as they force you to include a script, do not use the service. (This is also an argument against font-services like Typekit and Fontdeck. At least the pricing models of these services is realistic, and they do offer some optimisation options). Not all services make you include a script. Some services, like MyFonts, track your visitors with a stylesheet file. While this does take away some of the security concerns, there are still a few.

So

So, basically, don’t use commercial web fonts unless you are absolutely certain that the license allows you to create a beautiful, useful, safe and fast experience. Right now, the major foundries only offer you the exact opposite.

Remember, before you make a mock-up and present it to your client, first read and understand the license-agreement. Discuss the implications of this agreement with as many experts as you can find. Talk with front-end developers, performance geeks, security people and legal staff about what the use of a font means. We really want to use all these beautiful fonts, but unfortunately, right now, we really probably shouldn’t yet.