Why Is @Font-Face Throwing a 404 Error on Woff Files

Why is @font-face throwing a 404 error on woff files?

I was experiencing this same symptom - 404 on woff files in Chrome - and was running an application on a Windows Server with IIS 6.

If you are in the same situation you can fix it by doing the following:

Solution 1

"Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties): .woff application/x-woff"

Update: according to MIME Types for woff fonts and Grsmto the actual MIME type is application/x-font-woff (for Chrome at least). x-woff will fix Chrome 404s, x-font-woff will fix Chrome warnings.

As of 2017: Woff fonts have now been standardised as part of the RFC8081 specification to the mime type font/woff and font/woff2.

Thanks to Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Solution 2

You can also add the MIME types in the web config:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

@font-face returns 404s on fonts

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!

Cannot load font files, 404 error

Please remove the suffix (?-fvbane) from fonts CSS may be this can be caused for 404.

Error on my Font-face - Give me 404 get to the side

I've had similar issues, and just playing around with the order of the URLs seemed to sort things out. Give this a try for your first font, and if that works, you then have a basis for Font Awesome. Though I generally prefer to use CDN's where possible:

@font-face {
    font-family: 'Simple-Line-Icons';
    src: url('../fonts/Simple-Line-Icons.eot');
    src: url('../fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg'),
         url('../fonts/Simple-Line-Icons.woff') format('woff'),
         url('../fonts/Simple-Line-Icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3

This worked for me:
Add the following lines to your web.config

<system.webServer>
 <staticContent>
   <remove fileExtension=".woff"/>
   <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
 </staticContent>
</system.webServer>

You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type
This holds for IIS as well. As Seb Duggan explains here:IIS default MIME, by default .woff files will not be served by the server.

While loading webfont through @font-face, .woff and .ttf files throw NetworkError: 404 Not Found

You can use the following in your .htaccess file

 <FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

---

Related Topics