The web has a long and storied history with text, typography and fonts. Most content on the web is text. And at the very least, typography accounts for 95% of web design. But this is the story of fonts, that fundamental building block of design.

In 2009, the WOFF font format was developed, and subsequently sent to the W3C to become part of an open standard. The release of the WOFF format signaled a new day for web fonts, and implementation reached more or less a consensus among browser makers and developers. Here’s the tricky bit. Web fonts had been technically feasible and ready to go since 1998, with the release of Internet Explorer 4.

It’s just that no one used them for 10 years.

The First Font Rules

The creators of the web understood the importance of typography and font selection in the early days. Back then, the web was more or less just text. So even the first version of CSS in 1997 made special mention of fonts. The specification contained the first ever font styling rules, which included font-family, font-variant and font-weight. As browsers moved to implement these font rules, designers began to have some actual (but still fairly basic) control over typography.

There was one catch. For a user to actually see a developers font choice with font-family on a webpage, the font itself needed to be installed on their computer. But the web was multi-platform (a feature, not a bug I might add), so browsers could be used across computers and operating systems. Because operating systems were so different, there were very few guaranteed choices.

Microsoft helped quite a bit when they commissioned and then released for free two fonts designed specifically for the web, Verdana and Georgia. These fonts took into account the still latent rendering abilities of early web browsers and subsequently looked great on digital screens. But even with the addition of these two fonts, there were only about 10 fonts total a designer could chose from they could be sure visitors would see.

Introducting @font-face

To solve this problem a brand new rule was introduced in CSS2, which started to make the rounds in 1998. It was called @font-face and it let developers link to a URL of a font file that browsers could download, and then display on a webpage. So even if the user browsing a page did not have a font installed on their computer, they could still view it.

Internet Explorer, a bit ahead of the curve at the time in terms of CSS support, was the first to implement @font-face. Netscape wasn’t far behind. And suddenly, designers could use custom fonts.

At least, in theory.

The CSS spec defined the structure of the font-face rule, but didn’t go much further than that. Fonts, or rather digital fonts, can come packaged in a few different formats. So when Netscape, for instance, implemented the feature they used a closed-source digital font format known as TrueDoc from the company BitStream. Microsoft, on the other hand, chose a format known as Embedded OpenType (EOT), which they had previously used with Microsoft Word and was perfect for the web because it kept digital files compact, making them quicker to download.

But there was another reason Microsoft went with EOT. In addition to its compactness (thanks to subsetting), there was also a layer of encryption embedded in the font. This helped protect fonts from being downloaded from the web and used without a license in other contexts. Because as it turns out, the biggest issues standing in the way of web fonts were not technical. They were legal.

The Problem with Web Fonts

The @font-face rule allowed developers to pass just about any URL to the src attribute. But passing a URL to a downloadable font there, meant that it was easily accessible for any user to download and install anywhere. So if I embedded a font on my own site, another user could download the font and use it on their own site, or let’s say commercial software, without ever paying for a license.

The opinion on this particular matter was a bit split among font creators. Some believed that this was just the way of the future, and that enough legitimate users would pay for licenses in the long run.

Others, especially those from larger companies like Adobe, were understandably nervous about what kind of piracy they could expect. Certainly, the EOT format represented a step in the right direction. Microsoft even tried to get EOT as an official W3C recommendation, though it was rejected. But most from this camp did not believe the format went far enough. So a good amount of font foundries did not provide licenses for embedded fonts on the web.

Ten Years Later…

After that, web fonts kind of fell out favor. Designers kept working with the ten or so fonts they had available. And things even got a bit worse in some ways. When Netscape open-sourced their browser and became Mozilla Firefox, they had to pull their support of @font-face because it used a closed source digital file format.

For a decade or so, there was only one sliver of light for the future of web fonts. In the early 2000’s, the CSS standardization process was radically changed with CSS3. Rather then work on one monolithic specification, CSS was broken up into individual modules, each a subset of CSS’s overall functionality. Each module was independently developed by separate teams within the W3C, so that some features could advance even when others did not.

One of these modules was the CSS3 Web Fonts Working Draft. CSS3 Web Fonts expanded on the definition of fonts, adding new rules. And it brought with it a renewed interest in web fonts.

It would be several years before the Web Fonts draft was ready for release as an official specification. In the meantime, some began to push for a re-introduction of @font-face into modern browsers. The leader of this charge was most likely Håkon Wium Lie, the inventor of CSS. He knew that many browsers hesitated to implement web fonts because Microsoft owned the EOT format, so he began to push for different font formats, such as the newer TrueType and OpenType, to be used instead.

Lie also pointed out the nature and the world’s understanding of the web had drastically changed since 1998. With techniques like image replacement, designers were using custom fonts anyway, just not in a way that was accessible and future-proof. And many font foundries had begun to see the value of the web and digital licenses, but now only lacked a way to package and distribute their fonts for use on the web. So licensing wasn’t necessarily a solved problem, but it was a forgotten one.

Then, in 2009, worlds converged to finally make web fonts a thing. First, designers got @font-face support from the two largest holdouts, Safari and Firefox. Both opted for the TrueType and OpenType formats favored by Apple over EOT, but it was enough for developers to start experimenting with web fonts across all browsers.

Then came the CSS3 Web Fonts working group which released a full and cohesive specification for the Web Fonts module on June 18, 2009. There would, of course, be further revisions as browsers continued their implementations, but the draft represented something stable.

Right on the heels of all this news came the service Typekit, launched by Jeffrey Veen in May of 2009. Typekit was a font-hosting service that connected font foundries to designers and developers with easy to understand licensing terms and cross-browser compatibility. With just a few lines of code from Typekit, developers could use licensed custom fonts on their sites. But even still, quite a few larger type foundries waited in the wings.

WOFF

Then there was the news that brought it all together. The Web Open Font Format (WOFF) was officially released. It’s creation represented the combined efforts of Microsoft, Opera, Mozilla and several type designers and font foundries. It kept font files lightweight, and encoded files for web use only (to help with licensing). Finally, a font had arrived that everyone could agree on. By 2011, this format would be introduced in every major browser bringing with it true cross-browser compatibility and font creators from around the world began making their fonts available.

With greater choice came greater innovations. Designers began experimenting, and once again typography was brought to the forefront of design. But as with just about any decision the web, there was a lot of work behind the scenes to make it happen.