Text and fonts - HTML5 and CSS3 - page 395

Standard Prefixed

This example has two properties;
font-family and src . font-family
is a name; any name will do,
although it will make your life
easier if it's representative of
the actual font name. src
specifies a URL to the font file
and a file format.

4.0 -

3.5 -

4.0 -

10.0 -

3.1 -

Here are the declarations for the other two fonts in the earlier example:

@font-face {
font-family: "Nimbus Sans L Bold";
src: url(NimbusSanL-Bold.ttf) format("truetype");
}
@font-face {
font-family: "Bitstream Vera Sans Bold";
src: url(VeraBd.ttf) format("truetype");
}

Now that the downloadable fonts have been defined, you can reference
them in CSS rules like any other font:

h1 { font-size: 32px; font-weight: normal; }
div:nth-child(1) { font-family: "Liberation Sans Bold"; }
div:nth-child(2) { font-family: "Nimbus Sans L Bold"; }
div:nth-child(3) { font-family: "Bitstream Vera Sans Bold"; }

These rules lead to consistent results cross-browser (except, of course,
Internet Explorer 8 and earlier). Try it for yourself with listing ch11/
font-face-1.html.