HTML and CSS Reference
In-Depth Information
A basic embedded font declaration looks like this:
@font-face {
font-family: "Chris Script";
src: url(fonts/ChrisScript.ttf);
}
h1 {
font-family: "Chris Script", cursive;
}
If a browser did not support the
@font-face
rule (or could not find or did
not understand the particular format of the font), it would ignore the
first font name when it tried to follow the
font-family
rule for the
<h1>
element and render the element using the browser-defined
cursive
font.
A font that may appear on the system can be searched for by font name
using one or more
local()
values before the
url()
. This prevents the
need to download a copy of a font that might be installed on some
computers, but it's not ubiquitous enough to be relied on or considered
safe for use without embedding.
@font-face {
font-family: "Vera Sans Mono";
src: local("Bitstream Vera Sans Mono"),
url(fonts/BSVSM.ttf);
}
h2 {
font-family: "Vera Sans Mono", "Courier New", cursive;
}
If the family name specified in the
@font-face
rule exists already either
by a previous rule or because it is on the user's system, the new defini-
tion will take its place.
