@font-face fonts are not being loaded

I am working on a site that is mostly a standard html/css site, but I am trying to incorporate a WordPress blog that has the same styling in a separate directory. So, you click on the blog link it accesses a WP install in the blog folder. I have done this with another site I built and it worked very well, but on this site I used a Google web font as a back up for computers that don’t have the Rockwell font. On the main part of the site, I just used the standard html code Google provides and it works. Then, I put the same code in the header.php file and it does not work.

After some research I found out Google web fonts just use the @font-face css tag to load a file that they are hosting, so I set up a test on my computer. I have the following code in the main site css as well as the WP theme css file. I have Rokkitt stored in a folder called ‘fonts.’ On the main site it loads fine, but on the blog, it’s showing Time New Roman. If you inspect the css with Firefox or Chrome’s inspection tools, they say the rule is supposed to be using Rokkitt.

@font-face {
      font-family: 'Rokkitt';
      font-style: normal;
      font-weight: 400;
      src: url(https://localhost/Crossfit/fonts/rokkitt.otf);
    }

    h1
    {

            font-size: 3.41em;
            color: #f8120a;
            font-family:'Rokkitt';
            line-height: 1em;

    }

Here is the link to the actual site… https://www.crossfitcumberland.com

If you have Rockwell on your computer, everything works great, but if you disable Rockwell in the developer tools of Firefox or something similar it just bypasses Rokkitt and goes to the next font.

I don’t know where to look next. I have only done two of these sites with customized blog themes, so I’m still pretty new to this. Any help would be appreciated.

Thanks!

Also, if it helps I have been modifying the EmptyCanvas theme to make the custom theme.