The Liberation of Web Typography —
From 10 System Fonts to Variable Fonts

Do You Remember the Verdana Era?

Picking a font feels effortless now. Open Google Fonts, browse a few thousand typefaces, copy a <link> tag, done. Subscribe to Adobe Fonts and the library grows even larger. You might agonize over which typeface suits your project best, but you'd never complain about having no options.

Rewind fifteen years and the situation was radically different. The fonts a web designer could rely on numbered about ten: Arial, Verdana, Georgia, Times New Roman, Trebuchet MS, Courier New, and a handful of others. When I first started writing CSS, those were essentially the only values I could put inside font-family and expect every visitor to see them.

The reason was fundamental. Web browsers could only display fonts already installed on the visitor's computer. Windows, macOS, and Linux each shipped different sets of typefaces. The overlap — the so-called "web-safe fonts" — was tiny. Designers didn't choose fonts so much as accept the ones they were given.

In print, graphic designers had spent centuries building a typographic culture with hundreds of carefully crafted typefaces. The moment that culture moved to the web, it was reset to zero. Text was readable, but it couldn't speak. The punch of a headline, the quiet authority of body copy — everything was squeezed between Arial and Times New Roman.

The Birth of Web-Safe Fonts

In 1996, Microsoft launched the "Core fonts for the Web" project with a clear goal: distribute free, high-quality typefaces designed specifically for screen reading. Two of the fonts born from this initiative — Verdana and Georgia — were designed by the legendary type designer Matthew Carter.

Carter prioritized legibility at small sizes on low-resolution monitors. Verdana features generous letter spacing and a tall x-height that resists pixel-level distortion. Georgia was crafted as a screen-optimized serif, painstakingly hinted by Tom Rickner so that its delicate strokes survived the crude rendering of late-1990s displays.

Even with Verdana and Georgia in the mix, the total number of cross-platform-safe fonts barely hit double digits. If designers wanted personality in a headline, they had one option: open Photoshop, set the type in the desired font, export it as an image, and drop it into the HTML. This "image replacement" technique meant text that search engines couldn't read, images that blurred on zoom, and assets that had to be re-exported every time the copy changed. It was painful. And for years, it was all we had.

The Lost Decade — Why Nobody Used Web Fonts

The technology was there in 1998. The @font-face CSS rule let you point a browser at a font file on a server, download it, and render text in that typeface. IE4 already supported it. So why did web fonts go unused for ten years?

The biggest barrier wasn't technical. It was legal. When you specified a URL in @font-face's src property, that file became publicly accessible. Anyone could download a commercially licensed font from your site and install it on their own machine — no purchase necessary. For type foundries that had spent years designing these typefaces, this was a dealbreaker.

Major foundries, Adobe chief among them, pushed back hard against unrestricted font embedding. Microsoft's EOT format offered encryption, but it was proprietary. Microsoft tried to get EOT accepted as a W3C standard and was rejected. Meanwhile, when Netscape morphed into the open-source Mozilla Firefox, its support for the closed-source TrueDoc format was stripped out. The result: outside of Internet Explorer, there was virtually no way to use web fonts at all.

sIFR, Cufón, and Other Hacks

Designers refused to give up. During this lost decade, a string of creative workarounds appeared. sIFR (Scalable Inman Flash Replacement), popular from around 2004, used Flash to swap headline text with any typeface you wanted. Cufón, which emerged in 2009, tried to do the same thing with JavaScript and VML/Canvas rendering.

Both were hacks, and they felt like it. Text selection broke. Accessibility suffered. Performance tanked on pages with multiple replacements. But the underlying impulse was sincere: designers wanted expressive typography so badly that they'd bend Flash — a tool meant for animations — into a font renderer.

Håkon Wium Lie, the inventor of CSS itself, made the case plainly in a 2008 talk at ATypI. Designers, he argued, were already using custom fonts on the web through image replacement — a method that was neither accessible nor future-proof. The responsible thing wasn't to block web fonts; it was to provide a proper mechanism for them.

2009 — The Year Everything Moved

If there's a single year that broke the dam, it's 2009. Within the span of a few months, every piece that had been missing fell into place.

First, Safari and Firefox shipped @font-face support using TrueType and OpenType — not Microsoft's EOT. That meant developers could start experimenting with custom fonts across all major browsers for the first time.

Then, in May 2009, Jeffrey Veen and his team at Small Batch, Inc. announced Typekit. It was a subscription-based font hosting service that sat between foundries and designers, handling licensing, subsetting, and cross-browser delivery. Foundries could make their fonts available on the web without giving away the raw files. Designers got a simple JavaScript snippet and access to professional typefaces. Typekit didn't solve piracy entirely, but it made the legitimate path so easy that most people took it willingly.

That same year, the W3C published the CSS3 Web Fonts module as an official working draft, giving browser makers a shared target to implement against. And the Web Open Font Format — WOFF — was developed through a collaboration between Mozilla's Jonathan Kew, type designers Erik van Blokland and Tal Leming, and engineers from Microsoft and Opera. WOFF kept files compact and encoded them for web-only use, addressing foundry concerns about redistribution. By 2012, it became a W3C Recommendation, and every major browser supported it.

In May 2010, Google launched Google Web Fonts — now Google Fonts — offering open-source typefaces for free. It was a watershed moment. Suddenly, anyone building a website — from a student's portfolio to a Fortune 500 corporate site — could embed professional-grade typography with a single line of code. The democratization of web typography had begun in earnest.

WOFF2, Variable Fonts, and the New Frontier

Once web fonts became mainstream, a new constraint surfaced: performance. Font files aren't enormous by image standards, but they add up — especially when you load multiple weights of the same family. And for languages like Japanese, Chinese, or Korean, where a single font can contain tens of thousands of glyphs, file sizes easily reach several megabytes.

In 2014, WOFF2 arrived as the successor to WOFF. Its key innovation was the use of Brotli, a compression algorithm developed by Google, which reduced file sizes by roughly 30% compared to WOFF 1.0. WOFF2 became a W3C Recommendation in 2018, and today virtually every browser supports it natively.

Then, in September 2016, something even bigger happened. At the 60th ATypI conference in Warsaw, four companies that rarely agree on anything — Apple, Google, Microsoft, and Adobe — jointly announced OpenType 1.8. The headline feature: variable fonts.

Before variable fonts, changing the weight of a typeface meant loading a separate file for each variation. Light, Regular, Bold, Black — four weights meant four HTTP requests and four downloads. Variable fonts collapse all of those into a single file. And instead of choosing from a handful of predefined steps (400, 700, 900), you can specify any value along a continuous axis — 423, 651, whatever your design calls for. CSS gives you the font-variation-settings property to control weight, width, slant, optical size, and any custom axis the type designer defines.

/* One font file, any weight you want */
h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 823;  /* any value between 100–900 */
  font-variation-settings: 'wght' 823, 'slnt' -5;
}

The performance gains are real. A variable font file containing every weight from Thin to Black is often smaller than downloading five separate static files for the same family. Design flexibility and page speed improve simultaneously — a combination that had been impossible before.

What Freedom Demands

Looking at the arc of web typography, one theme runs through every chapter: the steady removal of constraints. Ten system fonts gave way to image replacement hacks, which gave way to @font-face, WOFF, Google Fonts, and variable fonts. Over twenty-five years, the web's text has inched toward the expressive freedom that print typography enjoyed for centuries.

But freedom introduces its own problems. The ease of Google Fonts has made it tempting to default to whatever's popular. Roboto, Open Sans, Montserrat, Lato — with thousands of options available, traffic concentrates on the same half-dozen families. The irony is hard to miss: we escaped the Verdana monoculture only to build a new one out of different typefaces.

CJK (Chinese, Japanese, Korean) web fonts face their own challenges. A Japanese font may contain over 15,000 glyphs — orders of magnitude more than a Latin typeface — making file sizes a persistent concern. Techniques like subsetting and unicode-range splitting have improved things dramatically, but Japanese web typography still doesn't enjoy the same effortlessness as its Latin counterpart. Open-source families like Noto Sans JP and BIZ UD Gothic, distributed through Google Fonts, are steadily expanding the palette, yet the journey toward true typographic freedom for CJK languages is still underway.

The next time you write a font-family declaration, pause for a moment. Think about why that typeface exists, who designed it, and what it took to make it usable on the web. Every font you load carries a quarter-century of technical battles, licensing negotiations, and format compromises behind it. Understanding that history won't make your CSS any shorter — but it might make your design choices a little sharper.