Most people think of the fonts that come installed on their computer as somehow being “free”. That’s rarely the case. Instead, a company (Microsoft, Apple, Adobe, etc) have paid licensing fees to provide the user with the right to use particular typefaces under certain circumstances. There is no issue in using the fonts in your Word documents, Powerpoint presentations or PhotoShop images, because when you do so you’re only presenting the typeface: no-one can extract the font you used for text in a PSD file. But when you embed a font on a website, you are making the font available for download by the viewer. Note that this is entirely different approach to creating a traditional CSS font stack, which relies on the viewer already having that a typeface installed on their device.

<img src="snark-hunting.png" alt="But while he was seeking with thimbles and care">

The result:

A bitmap image of a font (Hoefler Text): perfectly legal to use on a site.

A Bandersnatch swiftly drew nigh

p {
	font-family: Georgia, Times, "Times New Roman", serif;
}

A traditional CSS font stack: also perfectly legitimate, but only rendered correctly if the user has the font(s) already installed.

And grabbed at the Banker, who shrieked in despair

@font-face {
	font-family: "French Canon";
	src: url(french-canon.otf);
	font-weight: 100;
}
p {
	font-family: "French Canon", cursive;
	font-size: 2rem;
}

Text rendered with an embedded font. Renders correctly, but only by making the font code available to the browser. The site designer is legally responsible for knowing that the font can be used in this manner.

Fonts are software, and are licensed in the same way, often with restrictions in their use. You must be absolutely clear that you can embed a font on a site, otherwise you may find yourself subject to criminal charges and legal consequences. Bottom line: if you don’t know for certain that a font can be embedded on a site, you cannot legally do so.

Every font foundry issues a EULA for their fonts, a legal agreement that determines the scope of work available for a typeface. A typical example was the Hoefler & Co statement, which read, in part:

Your End-User License Agreement allows you to use fonts online in ways that don't transmit the font data, expose the fonts directly to readers, or compromise the security or integrity of the fonts.

The use of the CSS @font-face tag is not currently allowed under any H&FJ license. Such use constitutes the illegal distribution of our font software, and is therefore not permitted under any circumstances.

This doesn’t mean that there is a dearth of embeddable fonts: thousands of typographers have given their work away for free, either on their own sites or through services such as Google Web Fonts or Font Squirrel. Tens of thousands more typefaces are available through subscription services like TypeKit, WebType and FontFont. These function as clearinghouses, allowing you to embed fonts legally and with the knowledge that the original designer is being fairly compensated.

Using embedded fonts legally isn’t hard, but it does require a sense of respect for the typographer’s work and self-discipline in design: if the “perfect font” isn’t available as an embeddable webfont, you have to find ways to adapt.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.