The @font-face property

Let's start this chapter by learning how to use the @font-face property to add a web font to our site. First, we'll add an OTF file to a folder on our site, then we'll define a new font in our CSS, and finally, we'll apply that CSS to the elements on our web page.

Adding font files directly to the site

In our project files for this section, we have a new folder called fonts. Inside this folder, there's an OTF file called LeagueGothic-Regular:

So now this font lives in our site's folder, and the end user visiting our website will download this font onto their computer, just like they downloaded the HTML, CSS file, and images. But first, we have to tell it to do that and look for it in our CSS.

Defining and applying new fonts in our CSS

In the CSS, right underneath our reset, let's add a new section called fonts. Add the @font-face; and this will allow us to declare a new font:

/****************
Fonts
****************/
@font-face {
    font-family: 'League-Gothic';
}

I'm going...