The World Wide Web Consortium's (W3C) @font-face rule allows web developers and designers to embed custom fonts in cascading style sheets. This allows Internet developers to include unique, brand-appropriate typography that is not likely to be on most users' local systems.
For years designers and developers have limited themselves to so-called "web safe" fonts, which were likely to be found on most users' computers. These web safe fonts include many great looking and effective typefaces like Arial, Georgia, Tahoma, Palatino Linotype, Century Gothic, Impact, and Times New Roman, to name a few. But when just a handful of fonts—perhaps 15—are used on a few billion websites, it can be difficult to stand out or make a branding statement.
More than a Decade of @font-face
To address the issue of web safe fonts, the W3C proposed the @font-face rule in 1998. The rule allows developers and designers to link to hosted fonts not on a user's system, thereby allowing for any font to be used safely on any website.
The @font-face rule works by first declaring the embedded font's location and format, and then including the font in standard CSS descriptions.
@font-face {
font-family: Some Special Font;
src: url(http://site/fonts/some-special-font.ttf) format('woff');
}
p { font-family: Some Special Font, serif; }
Unfortunately, while nearly every major browser supported the @font-face rule(as an example, Internet Explorer 4 had it), because of licensing concerns few supported the same font formats, so Firefox might work with True Type fonts, but IE would not. Safari could render Open Type, but Firefox would not. This meant that even though a solution to all of a developer's typographical problems was within reach, it could not be used consistently across all important web browsers.
"Web Open Font Format" Comes to Top Three Browsers
But things have changed. Mozilla and Microsoft worked together with the W3C to develop the Web Open Font Format (WOFF), which is a sort of container for supporting True Type, Open Type, and Open Font Format typefaces. A WOFF compression tool encodes the existing font file, and the new .woff file can safely be embedded for use now in recent versions of Firefox and Chrome now, and IE9 when it is released.
This means that once IE9 launches, the vast majority of Internet users will be able to see fonts embedded with the @font-face rule and the WOFF extension.
Licensing Concerns
Developers will still need to ensure that they have a license to embed a particular font before implementing the @font-face rule.
Summing Up
For designs set to launch in the latter part of 2010, it should be safe to embed fonts with the WOFF extension. In the meantime, it is still possible to include links to fonts in several font formats, for cross-browser support.
