@font-face - How to add a custom font to my site?

I want to use a custom font for the site title.
The font I want is called Hobo Sdt.
I downloaded the font and created a web font using the fontsquirrel.com service.
I got files that I uploaded to the "fonts" folder and added them to the style.css:

@font-face {
font-family: 'hobo_stdregular';
src: url('/fonts/hobostd-webfont.woff2') format('woff2'),
url('/fonts/hobostd-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

..and then I added the font to the site-title element:

.site-title {
font-family: 'Hobo Std';
}

It doesn't work.
What do I do wrong?

The header.php, style.css, and the folder "fonts" are in the same directory.

 

The first thing I would do is clear cache or check out the website using a private tab/browser. Sometimes font caches mess things up.

Also, the font-family name in
@font-face {
font-family: 'hobo_stdregular';
//Other CSS
}

and

.site-title {
font-family: 'Hobo Std';
}

should be the same.

 

I don't have any cache.
Besides, I tried it on a few sites of mine and it doesn't work.
If I change the site title size or color, then I see changes, so there is not a cache issue.

This also doesn't work:

.site-title {
font-family: font-family: 'hobo_stdregular';
}

 

Try this

@font-face {
font-family: 'Hobo Std'
//Other CSS
}

and

.site-title {
font-family: 'Hobo Std';
}

 

nothing

 

OK, this?

@font-face {
font-family: 'Hobo Std';
src: url('./fonts/hobostd-webfont.woff2') format('woff2'),
url('./fonts/hobostd-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Note the dots in front of the URL links

and

.site-title {
font-family: 'Hobo Std';
}

 

nope

 

At this point, I need to see the code.

DM me with a zip file of the pertinent files and I will take a look.

 

Thanks a lot!
It works!

So, the issue was in the dot before the path to the font.
Also, was needed to assign the same font name to the site title which I stated in @font-face.

For example:

@font-face {
font-family: 'Candy Pop';
src: url('./fonts/candy-pop/candy_pop-demo-font-webfont.woff2') format('woff2'),
url('./fonts/candy-pop/candy_pop-demo-font-webfont.woff') format('woff'),
url('./fonts/candy-pop/candy_pop.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

.site-title {
font-family: 'Candy Pop', Arial, sans-serif;
}

Thanks a lot...