A note from the editors: This historically important article, while now outdated, predicted the age of web fonts.

CSS is ten years old this year. Such an anniversary is an

opportunity to revisit the past and chart the future. CSS

has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.

Article Continues Below

Many CSS properties, both old and new, deal with text: they describe text

color, position, style, and direction. This is all very

good—after all, text fills most of our screens. But in order for

properties to reach their full potential, we need a good

selection of fonts. And fonts are sorely missing from the web.

Consider the fine designs in the CSS Zen Garden. What makes them so

exciting to look at? In part, it is the variety of fonts. Fonts convey design messages and create effect, and while in

traditional print design there are a plethora of fonts available, fonts have been in limited supply on the web. Web designers

depend on ten or so universally available fonts for their designs, and are reduced in large part to using Verdana and Arial over and over again. A typical CSS Zen Garden design, on the other hand, uses a hand-picked

font to render text and aligns the glyphs to a pixel-perfect degree…and then uses that text as a background image.

A background image!

There are many reasons why background images should not be used to convey text. Images are expensive to transmit and hard to make. Imagine trying to translate a web page into 15 languages and having to produce a set of images for each language. Additionally, the quality of printed web pages suffers as images don’t scale to the resolutions offered by modern printers. Using background images is currently the only way designers can use their favorite fonts on the web. But shouldn’t web designers have access to a wider selection of fonts and be able to use them without having to resort to creating background images?

There is a way: web fonts. Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.

A brief history of web fonts#section2

This is not a new idea. In 1998, CSS2 described a way to link to fonts from style sheets, and both Microsoft and Netscape added support for web fonts in their browsers. However, neither vendor supported the most widely used font format, TrueType. Instead, they each picked a different, little-used format with few tools to support it (EOT and TrueDoc, respectively). And so web fonts disappeared from the designer’s toolbox.

Better news#section3

It’s a pleasure for me to announce that web fonts are back! Here

are some recently generated examples that show how a familiar document

can be rendered when TrueType web fonts are available:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

The PDF (and image) examples shown in this article have been produced by Prince 6, a

web-to-PDF-through-CSS renderer. (The Macintosh version must be installed via Terminal. Instructions are included in a ReadMe file. —Ed.) Prince is currently the only program

that supports TrueType web fonts, but it provides the proof of concept we need to begin thinking seriously about web fonts—and to begin advocating for their implementation in common web browsers. Before we get to that, though, let’s take a look at the code beneath these examples.

(Disclosure: I’m on the board

of YesLogic, the company behind Prince. Being on the board is a neat way of pushing for your favorite

features to be implemented.)

The examples are coded in HTML and CSS only; no images are

involved. CSS3 multi-column layouts and rounded borders have been

added for good measure, but they are not essential to the designs.

Each example uses four different web fonts. The style sheets point to

web font files which are fetched before the documents are rendered.

Web fonts: the code you’ll use#section4

Here is a simple example of how to use web fonts (Line wraps marked » —Ed.):

@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/ » kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif }

Those familiar with CSS syntax will recognize the last line. The @font-face construct may not be familiar, however it’s easy to

explain: as the “Kimberley” font is requested, the font file

is fetched from the specified URL. The syntax is described in the

CSS2 specification.

To avoid long lists of @font-face declarations in the style sheet,

they can be hidden using @import (Line wraps marked » —Ed.):

@import url(http://www.princexml.com/fonts/ » larabie/index.css) all; h1 { font-family: Goodfish, serif }

The TrueType files used in the examples above are designed by Ray Larabie. He is a renowned

font designer who has made hundreds of interesting TrueType fonts

freely available for use on the web. His fonts are elegant,

decorative, and playful.

Dieter

Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone

to use. Below are some examples that use his fonts:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

Getting more complicated#section5

When browsers start supporting web fonts, designers will be tempted

to adjust more properties than just font-family . In the examples shown

above, line-height , letter-spacing , word-spacing , and absolute

positioning have been tweaked.

This adjustment of other properties works well when the specified

fonts are fetched from the web. However, it may have unexpected

results in browsers that don’t support web fonts, and web designers should always

be make sure their pages degrade gracefully.

The most obvious way to ensure graceful degradation is to

specify a list of similar font families. For example, Ray Larabie’s “Primer Apples” is a charming, stitched font. You can see it

used in this example:

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

“Primer Apples” has no obvious replacement in the list

of fonts normally used on the web. However, the font metrics are quite

similar to the ubiquitous “Trebuchet” font which can be specified as an

alternative (Line wraps marked » —Ed.):

font-family: "Primer Apples", "Trebuchet MS", » sans-serif;

In a legacy browser without support for web fonts (or multi-column

layouts or rounded borders), the second example will look like this:

Screenshot of web page without support for web fonts.

The stitching is gone, but the degradation is graceful.

A proposal to the W3C : a media query for web fonts#section6

To further limit degradation, it would be useful to have a media query for web

fonts. Consider this example:

h1 { font-family: "Trebuchet MS", sans-serif; letter-spacing: 0.1em; }@media all and (web-fonts: "truetype") { h1 { font-family: "Primer Apples", sans-serif; letter-spacing: 0.2em; } }

As a result of the media query in the example above, the actual

letter-spacing will depend on whether web fonts are supported or not.

It is also necessary to specify, in the media query, that support for

TrueType is required. The “web-fonts” media query is not in the W3C’s

current Media

Queries specification and it has not been implemented by anyone.

But it’s a great idea, and very doable.

What does this mean in the real world?#section7

While Prince offers a neat proof-of-concept, common web browsers must

also add support for web fonts in order for them to become the next

big thing. So why haven’t they done so already?

The arguments against web fonts are mostly legal. Fonts are

intellectual property and therefore, the argument goes, cannot be

published on the web. Although the legal status of font shapes is

uncertain, font names are probably covered by copyright law. As such,

fonts are similar to copyrighted images and text. To publish

copyrighted material on the web, you need permission from the

copyright holder. There is a lot of text and images on the web because

copyright holders allow it, even encourage it. Likewise, many font

designers (including Ray

Larabie and Dieter Steffmann, whose fonts I use as examples in this article) allow

their fonts to be freely used on the web.

The best argument against web fonts, however, isn’t legalities—it’s aesthetics. Do we want to wade through web pages displayed in

third-rate fonts put together by designers who once used the

<blink> tag and created backgrounds with animated GIFs? Probably not. Once web fonts are available, make sure you use a browser in which author style sheets can be turned off. (Another disclosure: That would be Shift+G in Opera.)

Aesthetics also provide a strong argument for web fonts. There

are many beautiful and interesting fonts that can improve aesthetics

and increase visual variety on the web. Just as I am sometimes stunned

by beautiful book designs, I want to be overwhelmed by beautiful web

pages. And, I don’t want those beautiful pages to be made up of

background images.

You can help!#section8

Two things must happen before web fonts can take web design to the

next level. First, we must ensure the validity of the approach. Is the

subset of CSS2 that has been implemented sufficient? Do we like the

CSS code? The best way to help is to play with the

existing implementation and report back on your experience.

Second, we must convince browser makers to add support for web

fonts. This can be difficult. Browser vendors have lots of

specifications and well-intended improvement proposals to choose from.

Some of them are also busy fixing bugs. In order for new functionality

to make it onto the roadmaps, a compelling story must be told, and a

critical mass of developers must voice their support. We can make it happen.

CSS has been around for ten years, and is likely to be around for

another decade. Let’s finally give it some fonts to work with!