Game Development Reference
In-Depth Information
Web fonts
Implementation of original fonts on web pages was planned for a long time. In 1995, the HTML2 standard
added the tag
<font>
, which allowed using a font installed on the user's system, or falling back on a suitable
font family if the user did not have any of the required fonts. The CSS2 specification with identical
functionality came out in 1998; whereas the first attempts to implement font-face in IE4 and Netscape
Navigator were made in 1997, but never became popular. The cause of that may have been the low
bandwidth of dial-up access or each browser using its own format, with IE4 and newer utilizing Embedded
OpenType (EOT) fonts, and Netscape Navigator supporting TrueDoc (PFR) fonts. On top of that, there were
copyright issues with using fonts on the web, as they could simply be downloaded directly from the web site.
Then there was a prolonged lull on that front as designers customized various Flash plug-ins—like sIFR
and later, SVG rendering via Cufon—for adding fonts to web sites. It was only quite recently that the font
buzz resumed amid dynamic HTML5 development. Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+, Google
Chrome 4.0+, and even Internet Explorer 9+, received support for the familiar TrueType (TTF) and
OpenType (TTF/OTF) formats. A W3C working group gathered subsequently to approve the Web Open
Font Format (WOFF) specification, the prospective unified font format for all browsers.
WOFF is not a new font format but a standard of delivering fonts to the browser. Compression is now part
of WOFF, helping reduce file size by more than 40 percent. I would like to note that WOFF uses lossless
compression, so the unpacked font is identical to the original OpenType or TrueType font. This allows
keeping the rendering mechanism unchanged, thus preserving the quality of fonts. The format also
contains additional metadata whereby the author can specify how the font was used. The information will
not affect loading but will allow identifying the origins of the font. Hence, it will be easy to trace what font is
used on a web page. WOFF compresses, but does not encrypt, fonts because the format was not
designed as protection for those who wish to strictly control the use of their fonts.
WOFF is currently supported by all popular browsers: Firefox 3.6+, Google Chrome 6.0+, Opera 11.10+,
Internet Explorer 9+, and the new version of Safari for Mac OS X Lion.
Quite obviously, using WOFF is the simplest and most promising way of font styling, but how does one
convert a familiar font to a WOFF file, and what about legacy browsers? The easiest way is to use the Font
Squirrel generator (
www.fontsquirrel.com/fontface/generator
)
to upload an OTF or TTF font file and
obtain an archive containing the complete set of web fonts: TrueType, EOT, SVG, WOFF, and the special
“bulletproof” CSS style for quick and smooth integration in a web page, as shown in Listing 10-13.
Listing 10-13.
Bulletproof CSS style for almost all browsers
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
This format allows using custom fonts in a vast range of browsers: Safari 5.03, IE 6+, Firefox 3.6+,
Chrome 8+, iOS 3.2+, Android 2.2+, and Opera 11+—and that is good!
