Serving and Protecting Fonts on the Web
July 21, 2009
When describing Typekit to both web and type designers, we often say that we’re “offering a level of protection that the type industry needs.” Considering all the discussion there has been recently about differing formats and safeguarding fonts, we thought we’d explain our approach in detail.
The fact is, for something to appear in a browser, it has to be on the web. If it’s on the web, it can’t be completely protected. Recent history has shown repeatedly that attempts to manage digital rights through code have been rejected by consumers and drawn legal fire.
While the entertainment industry has wrestled with this issue for a decade, it’s only recently became a concern for foundries and type designers. Browser release schedules don’t iterate as fast as opinions do, and that requires everyone to experiment in public. Can commercial fonts be used in a way that doesn’t turn every website into a free font server? With Typekit, we feel there’s an opportunity to find a middle ground.
Depth in Defense
Defense in depth is an old military strategy and an apt analogy for what we’re doing. Armies would put barrier after barrier between them and the enemy. Each trench or string of barbed wire was relatively easy to get past, but each one slowed them down and tired them out a little. Dozens and dozens of these small hurdles would eventually wear them down.
We’ve put up a few hurdles of our own. Our intent is only to discourage casual misuse and to make it clear that taking fonts from Typekit is an explicit and intentional act. Here’s what we’re doing.
Levels of Protection
- HTTP referrer checking Only authorized domains are allowed to link to fonts. If you take the URL for our CSS or fonts and try to link them to your site — or just try to load them directly in your browser — you’ll get no response. To circumvent this, you’ll need to use curl or some other command line http user agent to spoof the referrer. But this technique helps us protect the service from Hotlinking and helps prevent quick “grab the link and try it on my site” experimenting.
- Data URIs We don’t just encode the fonts to make them look scary. We do this so they can be injected in-line with our generated CSS. While this adds about 20 percent to the file size, it’s actually more performant because we eliminate all but one HTTP connection. According to the Yahoo Developer best practices, “Most time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”
- Visible license data Based on the proposed metadata of the .webfont initiative, we’ve included license, copyright, and “allowed” domains as comments in our CSS. While the browser doesn’t currently support an automated mechanism for approving or displaying those rules, they are still a visible reminder that repurposing the files is illegal. Removing this text is easy, but it’s another explicit act.
- Segmenting and subsetting Even if you follow these steps, the resulting font files won’t contain the full character set. We split requested fonts into multiple files and recombine them using the CSS font stack. And we are subsetting only character sets requested by the Typekit user to improve performance. To make a usable and installable font, you’ll need to open a font authoring tool and recombine the glyphs.
With enough knowledge of web technologies, it’s possible to circumvent each one of these steps. Many can be automated with scripts and command line tools. In aggregate, they provide enough of a barrier to discourage all but the most motivated. And as we’ve seen over and over again, those with enough time and talent will find ways around any attempt at security. The reality is that there are countless places that make it far easier to steal fonts, if that’s your goal.
Our goal is different. After talking to dozens of foundries, we’ve found traction with a solution that works today and moves the conversation forward. With it, we hope to provide the easiest place to use real fonts on the web, legally and licensed, and to compensate type designers for their amazing contribution to visual communication.
You can see this all in action on one of the sites sites participating in our technology preview: For A Beautiful Web.