How do I include this font in my HTML?

I found a gorgeous font called Slim Joe on a webpage whose link I posted below.

Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.

Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.

The webpage where it's included:

http://presentation.creative-tim.com/ (where it says "creative tim")

How the font looks like:

https://befonts.com/big-john-slim-joe-font.html

Solution

You can include fonts into your website by css @font-face rule. This requires having either the otf or ttf font file on your server. To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.

Declare it like

@font-face {
  font-family: john-slim-joe;
  src: url(myFontsFolder/john-slim-joe.ttf);
}

Use it like

p{
  font-family: john-slim-joe;
}