52 Chapter 5
Using Local Fonts
The local() value for the src property is used to check whether a user
already has the defined font installed on his or her system—if the user
does, the local copy can be applied rather than downloading a new copy.
local() is a good idea, but it suffers from a few drawbacks. The first draw-
back, and not the least, is that local() isn’t supported by any versions of
Internet Explorer below 9!
Another drawback is that, in some cases, the @font-face rule doesn’t play
nicely with font management software, displaying incorrect characters or
opening a dialog to ask for permissions to use a font.
For these reasons, leaving the local() value out is generally safer.Font Formats
The next problem comes in the shape of different, and competing, formats.
When @font-face was originally implemented, it supported only Microsoft’s
proprietary Embedded OpenType (EOT) format, and this is still the only font for-
mat that is supported in IE8 and below. To complicate this still further, IE9
causes the @font-face rule to break when the browser is put into compatibility
mode; this is very much an edge case and becoming less relevant all the time,
but it’s worth noting as we can fix it simply in our bulletproof syntax.
The resurgence of interest in web fonts came about because modern
browsers—first Safari and then Firefox and then others—allowed the use
of the more common Tr u eTy p e and OpenType formats. Unfortunately, many
commercial font foundries wouldn’t allow their fonts to be used in this way
as it makes illegal copying of their fonts a little easier (see “Licensing Fonts
for Web Use” on page 53). For this reason, Mozilla consulted with some
font makers and created the Web Open Font Format (WOFF), which is now sup-
ported in all major browsers, including IE9 and above, with the exception
of older versions of the stock Android browser (4.3 and below).
Some browsers also accept the Scalable Vector Graphics (SVG) font type.
This font type is a vector re-creation of the font and is considerably lighter
in file size, making it ideal for mobile use. This format is really only useful,
however, if you need to support older versions (4.1 and below) of Safari for
iPhone.The Final “Bulletproof” Syntax
For your chosen font to display the same in every browser on every plat-
form, you should use code in this format:@font-face {
font-family: 'Gentium Basic';
src: url('GenBkBasR.eot');
src: url('GenBasR.eot?#iefix') format('embedded-opentype'),
url('GenBkBasR.woff') format('woff'),
x url('GenBkBasR.ttf') format('truetype');
}