RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Delivering Web-based Embedded Fonts in CSS 3

One of the new features in the CSS specification lets web developers embed third-party fonts that users can use directly in a web page. Learn how to use this useful feature.

ince 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.

Figure 1. Screenshot of My Site Using Scythe Web Font: I chose Scythe, a fairly typical free TrueType font, to give my site a Halloween theme.

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date