HTML and CSS Reference
Font formats: EOT, TTF/OTF, and WOFF
The @font-face rule was originally introduced in an early draft of the
CSS2 spec, but it was dropped back in 1998, mostly because of the lack
of fonts with licenses that allowed web distribution.
To overcome the resistance of the foundries, the browser manufacturers
developed their own font formats specifically for the web: Netscape
came up with the Portable Font Resource format (PFR), now as dead as the
Netscape browser; and Microsoft created Embedded OpenType (EOT), which
is still supported in IE today. Neither was successful; few fonts were
ever made available in either format.
Since 1998, several things have changed:
❂ Bandwidth has increased to the point that including a 100-300 KB
font file in your page seems less of a big deal.
❂ Font foundries now have the example of the music industry to learn
❂ The rise of open source operating systems has led to the creation of
several free but professional fonts funded by companies such as Red
Hat, Canonical, and Google.
❂ Tools have improved to the point that it's now feasible for profes-
sional font designers to produce free fonts in their spare time.
In June 1998, Safari 3.1 was released with support for downloading
TrueType/OpenType fonts (TTF/OTF) with @font-face in its desktop
incarnation and SVG W eb fonts, a format tied to the SVG specification,
on mobile devices. Firefox added support with the release of 3.5 in
June 2009, and a brave new world of web typography was born.
Although several smaller font foundries jumped on the bandwagon and
started making their fonts available with web-friendly licenses, the
major ones still weren't keen to get involved. They wanted a font file
format that couldn't be used as a desktop font. The answer is the new
W3C Web Open Font Format (WOFF) , which is being developed col-
laboratively between browsers, vendors, font foundries, and the W3C .