Support » Themes and Templates » @font-face fonts are not being loaded

  • Resolved soma.xs

    (@somaxs)


    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(http://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… http://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.

Viewing 2 replies - 16 through 17 (of 17 total)
  • Thank you so much, I was having the same problem and it was driving me crazy. Worked like a charm!

    EDIT: After some more looking around, using the HTML link instead of @import DOES work as long as you place it before your main stylesheet link. Don’t know if that’ll help anyone else, but it did work for me.

    hi my website is not loading on chrome it is working fine on IE and forefox. can anyone help

Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘@font-face fonts are not being loaded’ is closed to new replies.