Creating a Website: The Missing Manual, 3rd Edition

Embedded Fonts

For most of the Web’s history, web designers had to live with the limited capabilities of the font-family style property. They learned to get the most out of the small set of standard fonts. But CSS3 introduces a feature called @font-face, which provides a way for browsers to download a web page’s fonts on the fly (placing them in its temporary cache of pages and pictures), and use the fonts for just that page or website. As a result, web pages can use virtually any computer typeface.

Note

Technically, @font-face isn’t new. It was a part of CSS 2, but dropped in CSS 2.1 when the browser makers couldn’t cooperate. Now, in CSS3, there’s a new drive to make @font-face a universal standard.

At first glance, @font-face seems like the perfect solution to the font-family woes web designers face. Unfortunately, you’ll experience a certain amount of pain living on the bleeding edge of web design. The first challenge is getting support for your font format.

Web Formats for Fonts

Although all current browsers support @font-face, they don’t all support the same type of font files. Internet Explorer, which has supported @font-face for years, supports only EOT (Embedded OpenType) font files, up until IE 9. The EOT format has a number of advantages—for example, it uses compression to reduce the size of the font file, and it allows strict website licensing so a font can’t be stolen from one website and used on another. However, the .eot format never caught on, and no other browser uses ...