What are webfonts?

An introduction to type on the web

Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content.

For many web designers, proper typography has long been the missing component in their toolbox, but it’s finally here thanks to the resolution of a handful of technical, legal and compatibility obstacles.

Until recently, typography on the Web was very limited font-wise. Most websites could only display text using the small selection of common system fonts already installed on the user’s computer. Designers who wanted to introduce some flair, character or individuality to their work would instead need to create raster images — with very limited options for size and placement and serious implications for those all-important Google search results — or use substitution software like Flash or Javascript to render their choice of font, even though that software itself wasn’t universally available or taken up by endusers. Neither solution was a credible option for extended body text either, with the substitution techniques in particular requiring a great deal of processor power to render large amounts of text.

So what’s changed? In one sense, nothing. The various elements have been in place or under development for several, if not many, years. What’s new is that four currents of technical innovation or commercial interest have finally reached enough significant critical mass at the same time for everyone involved to commit to making webfonts a reality. This, then, is what you need to know:

@font-face. The CSS declaration that web designers and programmers use to specify a font. That font file will either be saved in a directory on your host server much like the images are, or it could be hosted by a specialist third party service provider. It’s been around since the late ’90s, and in a way was the first, if not the simplest step on the road to webfonts.

Read some coding tips

Formats and browsers. Bringing type to the web has meant the creation of a new standard format, WOFF, or Web Open Font Format. This isn’t a new font format however, but a compressed file that, as well as the font data itself, contains instructions on how the end user’s particular browser should display the font, effectively neutralizing various cross-browser compatibility issues.

Read our overview of current browser support

Type designers are now beginning to think in earnest and en masse about how well their fonts work on screen, and not just on paper. This is going to be an evolving debate — much as it has been for print legibility since, well, forever — so don’t expect a definitive outcome anytime soon. While this doesn’t exactly mean that everything you thought you knew about legibility has to be relearned, good designers will give careful consideration to their choice of fonts, and they will test, test and test again — particularly when it comes to body text.

Type foundries and their licenses. The final piece of the jigsaw was achieving an approximate consensus on how the producers of fonts could continue to control and therefore profit from their work. Factor in a general angst within the type industry about finding its most important product (big families for large publishing houses) devalued through digital proliferation (and not only illegally) and it’s clear that the issues still haven’t really been ironed out to everyone’s satisfaction. However, much of the heat in the debate seems to have shifted from those details to the best form of business model to adopt. In short, watch this space.

Fonts available for @font-face embedding

And here is a list of commercial font foundries which allow @font-face embedding:

Commercial foundries which allow @font-face embedding