HTML and CSS Reference
In-Depth Information
Web Open Font Format is the emerging standard, gradually supplanting OTF and TTF, as well as Internet
Explorer's proprietary EOT format. Internet Explorer didn't support WOFF before version 9 and has never
supported OTF/TTF in any version, so you may also wish to include an EOT font for older versions of IE.
Earlier versions of mobile Safari—the default browser on Apple iOS devices such as the iPhone and
iPad—only supported SVG fonts, so you can optionally include SVG for older Apple gadgets.
Some quirks in older browsers and even in some current mobile browsers can cause
web fonts to fail depending on how they're declared in CSS or how the web server
delivers them. The syntax we've shown here—WOFF plus a TTF fallback—works most
of the time for most of the latest browsers. If you like, you can be especially thorough
and deliver custom fonts to the widest possible range of browsers and devices—those
that support
@font-face
, of course—by using the so-called “Bulletproof
@font-face
Syntax” as described by Fontspring (
fontspring.com/blog/the-new-bulletproof-
font-face-syntax
). And as always: test your web pages!
We'll add a few more pieces of flair to the Power Outfitters site by using an embedded web font for
headings. Komika Display by Apostrophic Labs (
fontsquirrel.com/fonts/Komika-Display
) has a
bold, hand-lettered style that invokes the comic topics that inspired our design. We wouldn't want to use
such a stylized font for body text because it would be hard to read and just way over the top, but it's a
smashing typeface for headlines. In Listing 10-27 we've added an
@font-face
rule defining our custom
font, then applied that font to all of our heading elements.
Listing 10-27.
Defining a new font for headings on Power Outfitters
@font-face {
font-family: "Komika Display";
src: url(fonts/Komika_display-webfont.woff) format("woff"),
url(fonts/Komika_display-webfont.ttf) format("truetype");
}
h1, h2, h3, h4, h5, h6 {
font-family: "Komika Display", Calibri, "Trebuchet MS", sans-serif;
line-height: 1.2;
text-transform: uppercase;
color: #032587;
margin: 0 0 .25em;
}
.page-title { font-size: 2.25em; }
h1 { font-size: 2em; }
h2 { font-size: 1.572em; }
h3 { font-size: 1.286em; }
h4 { font-size: 1.143em; }
h5, h6 { font-size: 1em; }
The same general styling applies to all headings, but we've declared their sizes separately so we don't
need to repeat the declarations for
font-family
,
line-height
,
color
, and so on for every heading.
We've also included a separate sizing rule for the
.page-title
class; we told you it would come in handy
