@font-face fonts are not being loaded

  • Resolved soma.xs

    (@somaxs)


    11 years, 3 months 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.

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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?”

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    esmi

    (@esmi)

    11 years, 3 months ago

    Why is your font src pointing to localhost?

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 3 months ago

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

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months ago

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

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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'

    esmi

    (@esmi)

    11 years, 3 months ago

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

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    esmi

    (@esmi)

    11 years, 3 months ago

    No – there isn’t.

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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.

    Thread Starter soma.xs

    (@somaxs)

    11 years, 3 months 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!

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