O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Embedding Font Files

Problem

You want to use a font file in your web page, as shown Figure 3-7, with the Museo typeface.

Solution

Use the @font-face rule to assign a font-family name:

@font-face {
 font-family: "Museo 300";
}

Then associate the font file and file type:

@font-face {
 font-family: "Museo 300";
 font-style: normal;
 font-weight: normal;
 src: url("fonts/Museo300-Regular.otf") format("opentype");
}

Next, place the embedded font’s font-family value at the start of the font stack:

h2 {
 font-family: "Museo 300", Verdana, Geneva, sans-serif;
 font-weight: normal;
}
Stylized ampersand cited through a font stack

Figure 3-7. Stylized ampersand cited through a font stack

Discussion

The specification for font embedding has been part of the CSS2 specification since 1998. Internet Explorer for Windows has supported @font-face since version 4, but the IE browser supports only the Embedded OpenType Font format (.eot), which contains Digital Rights Management (DRM) code.

Other open file types for font embedding are supported in Safari 3.1 and later, Opera 10 and later, and Firefox 3.5 and later for the OpenType Face (.otf) and TrueType Format (.ttf), as shown in Table 3-3.

Table 3-3. Browser file type support

 

.ttf

.otf

.eot

Safari 3.1 and later

Y

Y

 

Opera 10 and later

Y

Y

 

Firefox 3.5 and later

Y

Y

 

IE4 and later

  

Y

Note

There is a new file format, Web Open Font Format (WOFF), that shows some promise. Support is included ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required