Using Downloaded Fonts

There are thousands of fonts out there for you to download an use.

Some Free Font Websites

You can download thousands of fonts on the internet. Many are free. Some will cost money.

On these websites, fonts are organized by category, or you can use their search bar.

Websites Links
1001 Free Fonts www.1001freefonts.com Over 71,000 free fonts
DaFont www.dafont.com Thousands free fonts
1001 Fonts www.1001fonts.com Over 22,000 free fonts
... Google More Google "free fonts" There are many, many free font websites out there.

Downloading the Font

Once you find a font you want to use, you click the download link on the font website.

This will download a zip folder that contains a bunch of stuff (copyright text files, screenshot images, and the actual font files).

Font files are .ttf or .otf. Here are the differences between font formats. If you have a choice, use .ttf fonts.

  1. download the zip folder
  2. copy the font file(s) out of the zip folder
  3. paste the font file(s) into your fonts folder
  4. rename the font file(s) (lowercase with dashes)

Defining the Font

Before you can use a font, you need to define it with an @font-face definition.

Here is an example of an @font-face.

@font-face {
  src: url("../fonts/egory-castle.ttf");
  font-family: "Egory Castle";
}

Using the Font

After you define the font, you can use it. Just place it inside whatever CSS rule you want.

Here is an <h2> using the "Egory Castle" font.

@font-face {
  src: url("../fonts/egory-castle.ttf");
  font-family: "Egory Castle";
}  

h2 {
  font-family: "Egory Castle";
  font-size: 70px;
}

Bold vs. Normal

Some fonts don't look good bold, especially fancy fonts.

Headers are bold by default and sometimes it is a good idea to remove the boldness of those headers using font-weight: normal.

This is the same "Egory Castle" font. Doesn't it look better not bold?

@font-face {
  src: url("../fonts/egory-castle.ttf");
  font-family: "Egory Castle";
}  

h2 {
  font-family: "Egory Castle";
  font-size: 70px;
  font-weight: normal;
}

Using Multiple Downloaded Fonts

To use more than one downloaded font on your webpage, just create a separate @font-face for each font.

Here is a webpage with THREE different downloaded fonts.

CSS

@font-face {
  src: url("../fonts/waltograph.ttf");
  font-family: "Waltograph";
}  
@font-face {
  src: url("../fonts/titania.ttf");
  font-family: "Titania";
}
@font-face {
  src: url("../fonts/united.ttf");
  font-family: "United";
}  

h2 {
  font-weight: normal;
  font-size: 60px;
}
.disney {
  font-family: "Waltograph";
}
.retro {
  font-family: "Titania";
}
.usa {
  font-family: "United";
}

HTML

<body>
<h2 class="disney">A Disney Font</h2>
<h2 class="retro">A Retro Font</h2>
<h2 class="usa">A Patriotic Font</h2>
</body>