WordPress.org

Support

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

[Resolved] @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(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 15 replies - 1 through 15 (of 17 total)
  • I can’t see WordPress installed on that website, can you link the website with the problem?

    The general css works on the main site, but the same code doesn’t work on the WordPress theme. My question is “Why does the main site load the font when WordPress doesn’t?”

    http://www.crossfitcumberland.com
    http://www.crossfitcumberland.com/blog

    The main site loads google fonts, the blog does not. If you have the Rockwell font installed, they will look the same, but if you look at the site on an ipad or android tablet, they will not be using the same font.

    esmi
    Forum Moderator

    @esmi

    Why is your font src pointing to localhost?

    That was the code I am using to test the @font-face tag to make sure I am using it correctly. I am working on a XAMPP server at home to try to work this problem out. Using this code I can get a font to load into the browser then use it in my css rules, but when I use the same code in the wordpress theme, it doesn’t load.

    I can’t see font-face styles in the loaded stylesheets;
    – wordpress05.css
    – og_style.css
    – reset.css

    On the website, it is sourcing from google’s web font site.

    I’m sorry. I have confused everyone. The WP install is pulling the font from the google web font site. This isn’t working for some reason.

    So when I searched for what was going on, I found out that using their code creates a css rule that uses @font-face.

    I am trying to strip away everything I can to find out what is going wrong.

    So I tried to experiment by downloading the font to a fonts directory and then accessing it on a local WP install. I still can’t get it to show on the blog even though it works for the main html/css hand coded portion of the site.

    Am I somehow telling wordpress to look for the font in the wrong place, or have I maybe configured my theme incorrectly?

    C:\xampp\htdocs\Crossfit\blog\wp-content\themes\EmptyCanvas\'mycssfile.css'

    C:\xampp\htdocs\Crossfit\fonts\'myfontfile.otf'

    esmi
    Forum Moderator

    @esmi

    You’re using an file path when you should be using a url – eg http://example.com/fonts/myfontfile.otf

    I am not asking how to use @font-face in a general sense. It is working on the first link I posted.

    I am asking if there is some different procedure for using it with WordPress.

    esmi
    Forum Moderator

    @esmi

    No – there isn’t.

    I appreciate you guys trying to help me with this. I know you have a lot of questions to answer, so I will try to narrow down what it going wrong with my site before trying to ask for help again.

    Hi everyone,

    I wanted to give an update on what fixed my problem in case anyone else finds themselves in the same situation.

    The main issue I had was that I couldn’t get google web fonts to load on my blog.

    The short version of what I did was this….

    First, I used the “@import” code on google fonts instead of the the html code.

    Second, I had to load the web font before anything else. (ie put the code before anything else in the style sheet.)

    I had another style sheet that I was importing before calling the web font. I was calling the web font too late for my blog to use it by calling it after importing another style sheet.

    I hope this helps someone!

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Resolved] @font-face fonts are not being loaded’ is closed to new replies.