Using open source fonts on your web page.

I saw a font that might be fun on a friend’s national parks website so I wrote up some notes to help them install and use it.

You can put the NationalPark folder in the root of your site. i.e. the same place that the wp-admin, wp-content, … folders are located or if you think you’ll want to use multiple fonts, create a font folder in the root.

Then add these lines to the end of your CSS file that is located in the theme that you are using. He’s using twentynineteen. It will be a different folder if you aren’t using the twentyninteen style.

/wp-content//themes/twentyninteen/style.css

@font-face {
 font-family: "NationalPark";
 src: url("/fonts/NationalPark/NationalPark-Regular.otf");
 }

.NationalPark {
  font-family: NationalPark;
}

@font-face {
 font-family: "NationalParkBold";
 src: url("/fonts/NationalPark/NationalPark-Heavy.otf");
 }

.NationalParkBold {
  font-family: NationalParkBold;
}

Call it with

<h2 class='NationalParkBold' style='font-size: 400%;'>

Like This

or

<p class='NationalPark'>

You can also use it in paragraphs, but it doesn’t have the impact like it does with headers. This paragraph is not much different than normal san serif text.