#font-face won't display custom fonts in WordPress - html

Question

I am attempting to add custom fonts to a WordPress site and I cannot get the correct font to display. I am able to get the custom font to display locally on an HTML and CSS document I whipped up real quick and also by using the web developer tools in Firefox, so I know the font is loading. The font is called "Indubitably", I downloaded it from Font Squirrel and I am specifically testing with the .woff format.
Here is my code:
#font-face {
font-family: 'indubitably';
src: url('fonts/INDUBITA-webfont.woff');
}
h1, h2, h3, h4, h5, h6 {
color: black !important;
font-family: 'indubitably' !important;
}
I think I've uploaded the font to the correct directory, which is /home/"myUsername"/html/wp-content/themes/hestia(my current theme)/fonts...
I've tried copying the code to style.css, I've used a plugin called Simple Custom CSS, I've also tried using the built-in WordPress CSS editor to no avail.
Sorry if this is a noob question, it is my first rodeo ;)

Answer 1

Try replacing the local path to your font with the complete URL, so change fonts/INDUBITA-webfont.woff to http://www.example.com/wp-content/themes/hestia/fonts/INDUBITA-webfont.woff (changing example.com to your correct domain, of course.

Answer 2

Solution 1:
In one of the sections that the font doesn't affect first try to right-click and inspect elements. Second, in inspect page, you can see the source of font-family that affected and easily change it in the source file.
Solution 2:
You can put static in your header page in customizing theme
Solution 3:
You can replace your specific font with the old one with the same name -> rename the new one name to old one name and put it into the fonts folder: wp-content/themes/hestia/fonts

Answer 3

I'm a big fan of transfonter which does all the heavy lifting in generating your font-face when given a font file. If you did do something wrong with your #font-face declaration, running it through this might amend them.
This is the kind of font-face it spits out:
#font-face {
font-family: 'Indubitably';
src: url('../fonts/Indubitably.woff2') format('woff2'),
url('../fonts/Indubitably.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Other than that, I'd double check your src url.
Your styles live in wp-content/themes/{project}/assets/css, whilst your fonts live in wp-content/themes/{project}/assets/fonts.
Try src: url('../fonts/INDUBITA-webfont.woff');. ../ allows you to go back into the containing directory (in this case the assets folder`).