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.
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.
And here is a list of commercial font foundries which allow @font-face embedding: