WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] @font-face fonts are not being loaded (18 posts)

  1. soma.xs
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    I can't see WordPress installed on that website, can you link the website with the problem?

  3. soma.xs
    Member
    Posted 1 year ago #

    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?"

  4. soma.xs
    Member
    Posted 1 year ago #

    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.

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    Why is your font src pointing to localhost?

  6. soma.xs
    Member
    Posted 1 year ago #

    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.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  8. soma.xs
    Member
    Posted 1 year ago #

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

  9. soma.xs
    Member
    Posted 1 year ago #

    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.

  10. soma.xs
    Member
    Posted 1 year ago #

    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.

  11. soma.xs
    Member
    Posted 1 year ago #

    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'

  12. esmi
    Forum Moderator
    Posted 1 year ago #

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

  13. soma.xs
    Member
    Posted 1 year ago #

    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.

  14. esmi
    Forum Moderator
    Posted 1 year ago #

    No - there isn't.

  15. soma.xs
    Member
    Posted 1 year ago #

    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.

  16. soma.xs
    Member
    Posted 1 year ago #

    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!

  17. panoratom
    Member
    Posted 1 year ago #

    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.

  18. Sheikh Nabeel
    Member
    Posted 8 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic