HTML and CSS Reference
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-family: "Emblema One";
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
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…