-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

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.
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.
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...