Cool New Marketing Technologies: Caught and Served

Web Fonts – Part 1

An Overview of Font Embedding, Font Linking, & the Current State of Fonts on the Web

Web designers have been limited to the fonts available on client operating systems—the standard web safe fonts that we are all familiar with. In the past few years, thanks largely to the efforts of Håkon Wium Lie and his web font campaign, several major browsers have started to support web fonts. Now, there is an effort to standardize web fonts which, if supported by font vendors, could open up whole libraries of fonts to be used on the web—expanding the options of web designers. This series is about the transition happening now—from the dark ages of web safe fonts to standardized web fonts. During the series we will cover the future as well as current state of fonts on the web.

At this moment there are two supported web font formats and several other proposed formats. Before I get into the details, I need to go over some definitions. These terms are sometimes used interchangeably, but for the purpose of this series I will use the most common definitions:

Web Fonts
Fonts that are placed on a server and linked to (or embedded) from HTML pages. Web fonts are not installed on client machines. They are downloaded on demand by the browser to display the specified font on screen. These include both embedded fonts as well as linked fonts (OpenType). Some people will use this term to describe only embedded fonts while others will use it to describe linked fonts. I will use the term to describe both embedded and linked fonts.
Font Linking
Linking an HTML page to a standard OS compatible font (TrueType, OpenType) that resides on a server so that a client browser can display that font. Linked fonts have a one-way binding: document to font.
Font Embedding
Similar to font linking but an embedded font has a two-way binding: document to font as well as font to document. Basically, the font stores data on what domain it is allowed to be displayed on. Currently, the only font format available for embedding is Microsoft’s EOT (Embedded OpenType).

Confused yet? What I’m trying to get at is that there are currently two competing web font formats – OpenType vs. EOT. Safari, Opera and now Firefox support font linking (OpenType). IE supports embedding (Embedded OpenType). So, technically we have web fonts now but the problem is that we don’t have a format that is supported across all modern browsers.

Thankfully, the W3C has put together a working group to tackle this problem:

“The mission of the Fonts Working Group, part of the Fonts Activity, is to allow wider use of fonts on the Web by identifying a font format that can be supported by all user agents, balancing font vendor concerns with the needs of authors and users and the simplicity of implementation.”

Why should we care about web fonts?

Fonts are an important way to communicate feeling and mood. Their letterforms convey meaning and enrich the experience of reading. Typography at its best blends the expression of verbal language with an expression of visual form to communicate one harmonious message. That said, the current limitations are an embarrassment to our industry

We know there are ways to display custom fonts on the web. We can use images or substitution techniques. But, let’s be honest, those are hacks. As a designer, I want my web pages to be elegantly designed on the inside and out. That means text should simply be text and should remain machine readable without any substitution tricks. In the meantime, those hacks can be handy while we wait for real web fonts and I will cover some of those techniques in the last part in this series.

The effort to set standards on the web is a momentous task requiring the input of many stakeholders. It stands to reason that once this web font tanker is pointed in an agreed upon direction it probably won’t change direction for many years. That’s why if you have a stake in web fonts, you should get into the conversation now or at least keep an eye on it.

The Web Fonts Series

Tags:

One Response to “Web Fonts – Part 1”