Since the first browsers came out, web designers have wanted to use custom fonts on their sites. It makes perfect sense: you should be able to choose not only your content but also the typesetting of that content. What has kept designers from doing so are the cost of high-quality fonts, the low quality of freely available, user-supplied fonts, and the uneven font support from mainstream browsers. All that may be about to change, however, as I learned this past Halloween.

To celebrate Halloween this year, I switched the heading fonts on my web site from their fairly generic Times Roman format to something more suitably spooky. While this sounds like a relatively easy task (just making a change to the CSS), I knew from previous experience that the state of embedded fonts on the Web was fraught with peril for any graphic designer. So, I decided to look into the issue a little more deeply. Beyond finding really cool fonts for my site, I also discovered that a new generation of typography may be about to emerge on the Web.

The particular font that I chose is Scythe, a fairly typical free TrueType font (see Figure 1). It’s available online at Halloween Fonts (also known as Fontenstein), a service of the Halloween suppliers Costume Kingdom. (Even off-the-wall businesses are adapting open source software for their own promotional benefits these days.) However, displaying fonts like Scythe is anything but typical.

Luckily, the W3C’s CSS Fonts Module Level 3 (released in 2007) introduced a number of new font features into the venerable CSS specification. One of the significant new directives (@font-face) allows web designers to add a local font to the list of recognized fonts for the renderer, making it possible to use the font directly in a web page. This article explains how to implement this directive in your CSS.

The Story of Embedded Fonts

Fonts are created through painstaking, detailed artwork that requires a strong sense of design and an intimate knowledge of typographic development. Even 30 years after Aldus (now Adobe) PageMaker brought layout typesetting to the masses, good fonts are still both relatively expensive and highly prized.

Of course, during those 30 years, the tools for developing such fonts also evolved considerably. As a result, you can find a lot of effectively free fonts that aren’t necessarily the epitome of art. They are either orphan fonts from foundries that have long since shuttered their doors or fonts developed specifically under an open source license.

Putting together a font still requires some skill, but a number of serviceable programs in the open source space (such as FontForge for Windows, OSX, and Linux) enable anyone?regardless of skill level?to create fonts from scratch and to edit existing fonts (including pulling in font glyphs from SVG files).

A number of solutions are available for providing embedded fonts for download, though most of them have tended to be very browser specific. Several years ago, Microsoft created the Embedded OpenType font format (.EOT) for use within web pages, but a resurgence of web browsers that did not support .EOT fonts began after 2003. Soon after, web designers began leaving the Microsoft solution out of their toolkits?it was usually easier just to create a graphic with words in the desired font than to deal with the uneven browser support.

CSS @font-face: Cross-Browser Font Support

In 2007, the W3C released the CSS Fonts Module Level 3, which introduced a number of new font features into the venerable CSS specification, including CSS selectors that start with the ampersand (@) character. One of the more significant new directives was @font-face. This directive lets a web designer link to a local font and give it a useful work name, which adds it to the list of recognized fonts for the renderer and makes it possible to use the font directly in a web page.

The syntax for @font-face is relatively simple:

@font-face {    font-family: myFontFamilyName;    src:[url(urlToFontResource) [format("truetype|truetype-aat|opentype|embedded-opentype|svg")][,]]*   }

For instance, for the Scythe font, my directive looked like:

@font-face {     font-family: "Scythe";     src:url("/sites/default/files/scythe.ttf") format="truetype";}

The optional format() property provides a hint to the system about the specific format that the font uses. If you don’t include format(), the browser can usually figure the type out on its own, but that can add to the overall processing time required to display the font. Apple uses the “truetype-aat” format (aat stands for “Advanced Apple Typography” extensions), while “embedded-opentype” is Microsoft’s .EOT format and “svg” is a reference pointer to an SVG glyph library.

Given that different platforms may use different formats, the directive can include multiple definitions for the same font-face:

@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe.ttf") format("truetype"),     url("/sites/default/files/scythe-aat.ttf") format("truetype-aat"),     url("/sites/default/files/scythe.eof") format("embedded-opentype"),     url("/sites/default/files/scythe.svg#font") format("svg");}

Additionally, some fonts contain multiple representations in the same resource (say, a TTF file that contains both the base TTF format and AAT extensions). In this case, the format statement can take multiple comma-separated arguments:

@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe.ttf") format("truetype, truetype-aat");}

When the family is defined, you can use it in exactly the same way that you would any other font-family. For instance, for the headings on my site, I set the CSS to try using the Scythe family first, then to fall back to Times New Roman:

h1, h2, h3, h4 {font-family:"Scythe","Times New Roman",serif;}

Again, as with regular CSS, the quotes are optional if the term is only a single word, but using them usually is a good practice.

In some cases, the TTF files that you have available may be broken up into different weight or obliqueness fonts. Rather than having the browser use its usual rendering rules from the base type (i.e., expanding each font glyph horizontally for bold or applying a skew to the glyph for oblique), you can use additional @font-face directives to add in the appropriate fonts when the time calls for it:

@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe.ttf") format("truetype, truetype-aat");}@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe-italic.ttf") format("truetype, truetype-aat");font-style: italic;}@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe-bold.ttf") format("truetype, truetype-aat");font-weight: bold;}@font-face {font-family: "Scythe";src:url("/sites/default/files/scythe-bolditalic.ttf") format("truetype, truetype-aat");font-style: italic;font-weight:bold;}

Thus, if you use the Scythe later in conjunction with font-style italic:

@h1 {font-family: "Scythe";font-style:italic;}

The browser will render the text with the scythe-italic.ttf font rather than using a default algorithm, which results in cleaner text output in most cases.

As with most CSS changes, the @font-face directive has taken a while to percolate into web browsers:

• Microsoft has supported @font-face as of IE 5.
• Opera’s support for @font-face landed in Opera 10.
• Firefox has it as of 3.5.
• Safari has had it since 3.2.
• Chrome also supports @font-face internally, but this option was disabled because of a potential security vulnerability for TTFs. You can set Chrome to recognize font-face by using the –enable-remote-fonts flag from the command line. If you’re running Linux Chromium, use chromium-browser –enable-plugins –enable-remote-fonts %U. Chrome is expected to re-enable @font-face with the next major release.

Always Have a Fallback Font

At this stage, you should view fonts delivered via @font-face the way you do accents?something that you can enable for most web viewers, but that you also provide fallbacks for in case the user’s browser doesn’t support @font-face. You usually will place @font-face anywhere you’d normally place font-family. Thus, in my code, I made sure that I included a fallback font (“Times New Roman”) and a fallback for that (“serif”):

@h1 {font-family: "Scythe","Times New Roman",serif;}

For all that, however, the (re-)emergence of user-supplied fonts on the web should present a great deal of opportunities for web graphic designers (as well as open up the possibility for visually horrendous designs, but that’s usually the price of innovation). Coupled with other useful features of CSS 3.0?such as columns?that are (finally) making their way into mainstream browsers, user-supplied fonts hopefully will affect a shift towards a visual style that marries the best features of both web and print media.