@font-face returns 404s on fonts

Question

I've tried to set up a custom font for my website, but it doesn't work neither on Firefox, Chrome or Edge/IE. The network section inside Firefox's developer tools says that the fonts were not found and lists 404s, although the urls should be correct. This is my code:

    @font-face {
        font-family: 'Raleway55';
        src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') format('truetype'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') format('woff'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') format('woff2');
    font-weight: normal;
    }

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Italic.ttf') format('truetype');
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBold.ttf') format('truetype');
font-weight: 600;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBold.ttf') format('truetype');
font-weight: 800;
}

@font-face {
    font-family: 'Raleway55';
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}

body { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h1 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h2 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h3 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h4 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h5 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
h6 { font-family: 'Raleway55'!important; font-weight:normal!important;  }
p { font-family: 'Raleway55'!important; font-weight:normal!important;  }
q { font-family: 'Raleway55'!important; font-weight:normal!important;  }
li { font-family: 'Raleway55'!important; font-weight:normal!important;  }
a { font-family: 'Raleway55'!important; font-weight:normal!important;  } <code>

Can you help? Thanks!

Also, instead of declaring all of the elements font-family, just use *{font-family: 'Raleway55';}. Don't set it to important or it will be harder to change later on. — user4616966
One last thing, if the stylesheet is in a folder, you can use ../ in front of a url to represent the parent folder. Let's say wp-content/stylesheets and your fonts are wp-content/fonts then you'd type in ../fonts/myfont.fontExtension. — user4616966

Jalen Davenport Jalen Davenport · Accepted Answer · 2017-05-02T02:26:30

So I'm afraid your paths are actually incorrect. Right now your style.css is pointing to a wp-content directory in the root of your web server which I'm pretty sure is not where your Wordpress install exists.

So assuming you have your Wordpress files setup in the following manner (just the basic setup here, obviously there are a lot more files):

wp-admin
wp-content
  plugins
  themes
    my-theme
      style.css
  uploads
    font-organizer
      my-font.ttf
wp-includes

You would want your CSS to look something like this:

@font-face {
    font-family: 'MyFont';
    src: url('../../uploads/font-organizer/my-font.ttf') format('truetype'),
font-weight: normal;
}

Basically what you're doing there is telling the browser to navigate up two directories from the location of the css file, which should land you in the wp-content directory, and then navigate into uploads/etc. to find the font.

Now the way I normally setup my fonts when I'm doing Wordpress sites is just to throw them into a duly named fonts folder located in the wp-content folder. That way they are kept out of the uploads folder and it makes it less likely for a client or yourself for that matter to accidentally delete them in the Wordpress Media manager. So my usual file structure is:

wp-admin
wp-content
  fonts
    my-font.ttf
  plugins
  themes
    my-theme
      style.css
  uploads
wp-includes

And then my CSS would be like so:

@font-face {
    font-family: 'MyFont';
    src: url('../../fonts/my-font.ttf') format('truetype'),
font-weight: normal;
}

Anyway, no need to do it my way, but just some food for thought. Hope this helps and good luck with the site!

@font-face returns 404s on fonts

1 Answers