Text and fonts - HTML5 and CSS3 - page 394

But that's not the only interesting thing going on. Here's the same page
in Chrome on my laptop. All the fonts look the same!
To add to the confusion, I'll now reveal that my Linux laptop has nei-
ther the Arial nor the Helvetica font installed, which is more obvious in
this screenshot of the same page in Opera.
Opera falls back to Bitstream Vera Sans for Arial but renders the
browser default font—which is serif rather than sans-serif—for
Helvetica. Chrome renders all three the same because it falls back to
Bitstream Vera Sans for Arial and Helvetica and also uses it for the
default sans. Firefox tries to use a font similar to the requested one, so
it replaces Arial with Liberation Sans and Helvetica with Nimbus Sans
L, and it uses Bitstream Vera Sans for the default sans font. You can
try it on your own system with listing ch11/font-comparitor.html. This
shows that web authors have almost no control over what fonts end up
being used in their pages. As you can imagine, that drives some design-
ers nuts! It's one reason you've seen so many bad hacks over the years
that replace text with images or Flash movies. But there's now a practi-
cal standards-based alternative: @font-face .
Gaining control of fonts with the @font-face rule
The @font-face rule allows you to specify a font to be downloaded with
the web page in the same way as markup, images, and script. Here's a
basic declaration to download the Liberation Sans Bold font:
@font-face {
font-family: "Liberation Sans Bold";
src: url(LiberationSans-Bold.ttf) format("truetype");
}