HTML and CSS Reference
In-Depth Information
Step 4: Add the @font-face property to your CSS
You've got the URLs for the .woff and .ttf versions of the font named “Emblema One,” so now
you're ready to add a
@font-face
rule to your “journal.css” file. Add the rule to the
top
of the
file, above the
body
rule:
Unli
ke a nor
mal rule
that se
lects a
set of e
lements
and
assig
ns style
, the @
font-fa
ce rule
sets up a
font,
which is
assig
ned to
a font-
family n
ame for
later u
se.
In the
@font-
face rul
e, we cr
eate a n
ame for
our fon
t using
the fon
t-family
propert
y. You
can use
any nam
e you wa
nt, but
it is bes
t usually
to just
match
the
font n
ame, like
“Emble
ma One.
”
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
The
@font-face
rule tells the browser to load the font files at the
src
URLs. Browsers will
attempt to load each
src
file until it finds one that it can support. Once loaded, the font is
assigned the name you specify in the
font-family
property—in this case, “EmblemaOne.”
Now let's take that font and see how we can use it in the style of the page.
Hin
t: you a
lready k
now
ho
w to do
this!
Step five: Use the font-family name in your CSS
Once you've loaded a font into the browser with the
@font-face
rule, you can use the font
by referencing the name you gave it with the
font-family
property. Let's change the font
of the
<h1>
heading in Tony's page to use the “Emblema One” font. To do that, we'll add
a rule for
<h1>
like this::
We spec
ify the
name o
f the fo
nt just
like
normal
, only th
is time,
it's a fo
nt we'v
e
h1 {
font-family: "Emblema One", sans-serif;
}
loaded
using @
font-fa
ce! And
just in
case
someth
ing goes
wrong,
we speci
fy sans-
serif
as a fa
llback.
Step six: Load the page!
That's it! You're ready to test your font. Reload Tony's journal page and check out the next
page to see what we got…
