Webfonts only load on home page.

  • I’m having trouble with web fonts not loading. They work fine on my home page but don’t load elsewhere. The fonts are locally hosted on the web server. In Chrome the console is showing a 404 error for my web fonts. WordPress is pointing to directories named for each of the site rather than pointing to the top-level web fonts directory.

    I’m adding CSS for the fonts using Appearance > Customize > Additional CSS. I’ve tried several themes and this problem occurs with all of them. I also tried using the Simple Custom CSS plugin and that doesn’t work, either. I tried using a clean install of WordPress with no plugins and that failed, too.

    An example of my CSS for the webfonts is:

    @font-face {
    font-family: AntarcticanMono;
    src: url(web-fonts/AntarcticanMono-Bold.woff2);
    font-weight: bold;
}
h1 {
    font-family: 'AntarcticanMono';
    font-weight: bold;
}

    Sorry for not having a link, but I’m developing this internally.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter JamesPuckett

    (@jamespuckett)

    Sorry, I just caught an error in my post. “WordPress is pointing to directories named for each of the site rather than pointing to the top-level web fonts directory.” should read “WordPress is pointing to directories named for each page” rather than pointing to the top-level web fonts directory. So instead of loading “web-fonts/AntarcticanMono-Bold.woff2” it tries to load “pageName/web-fonts/AntarcticanMono-Bold.woff2”

    That happens through a “feature” of HTTP that browsers all do.

    When you reference a file like that, it takes the file location from the current page URL. As an example from your case:

    Say your looking for the file /webfonts/font1.otf

    If your page is https://www.mysite.com the browser will look for the file at https://www.mysite.com/webfonts/font1.otf

    If your page is https://www.mysite.com/subpage the browser will look for the file at https://www.mysite.com/subpage/webfonts/font1.otf

    There’s two ways to get around this…

    First, you can use a full URL, eg src: url(https://www.mysite.com/web-fonts/AntarcticanMono-Bold.woff2);.

    Second, you can tell the browser to look in the site root folder by adding ./ to the files URL, eg: src: url(./web-fonts/AntarcticanMono-Bold.woff2);

    I’d suggest the second method.

    Be aware that this only happens because you’ve added the CSS style rules into teh pages themselves. If you were using a CSS stylesheet file instead the file location would be relative to the CSS file.

    Thread Starter JamesPuckett

    (@jamespuckett)

    I tried adding the ./ the paths and it isn’t working; the browser still looks in the same wrong place. I managed to get it working by adding an external stylesheet with a plugin. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Webfonts only load on home page.’ is closed to new replies.