HTTP 404 .woff files not found

Topics: Troubleshooting
Mar 23, 2015 at 11:30 AM
Hi,

I am almost done with this site and i am now doing performance optimization:

http://music-copyrights.com/

But when looking in the console log, it seems that two files are missing:
GET http://music-copyrights.com/Themes/PJS.Bootstrap/Styles/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0 

jquery-1.11.1.min.js:3 GET http://music-copyrights.com/Modules/Tekno.FlexSlider/Styles/fonts/flexslider-icon.woff jquery-1.11.1.min.js:3 a.getComputedStyle.Jbjquery-1.11.1.min.js:3 m.extend.cssjquery-1.11.1.min.js:3 m.each.m.cssHooks.(anonymous function).getjquery-1.11.1.min.js:3 m.extend.cssjquery-1.11.1.min.js:4 (anonymous function)jquery-1.11.1.min.js:3 m.accessjquery-1.11.1.min.js:4 m.each.m.each.m.fn.(anonymous function)(index):294 (anonymous function)jquery-1.11.1.min.js:2 m.extend.eachjquery-1.11.1.min.js:2 m.fn.m.each(index):294 (anonymous function)jquery-1.11.1.min.js:2 m.Callbacks.jjquery-1.11.1.min.js:2 m.Callbacks.k.fireWithjquery-1.11.1.min.js:2 m.extend.readyjquery-1.11.1.min.js:2 J
It seems like it has something to do with the combinator module, because when going to the path on the server, i can see the files.

Does anyone have an idea of how to fix this? or where i should look?

Regards

/Will.
Mar 23, 2015 at 12:31 PM
You need to configure your web.config to accept these files

see here:

http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files
Mar 23, 2015 at 12:52 PM
Sweet! Thanks giannik, that was a simple solution that did it!

I added this to web.config and that solved it:

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

/Will.
Mar 24, 2015 at 1:21 PM
Edited Mar 24, 2015 at 1:23 PM
Speaking of performance optimization, I also added support for .woff2, it offers 30-50% better compression to predecessor while still maintaining fast decompression and you can exclude it from gzip processing. Also correct mime type according to http://www.w3.org/TR/WOFF/#appendix-b is application/font-woff (without the x- prefix).
      <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
      </staticContent>
Just make sure you keep both as not all browsers support woff2 yet. They can run side by side.
@font-face {
  font-family: 'RobotoDraft';
  font-style: normal;
  font-weight: 400;
  src: local('RobotoDraft'),
       local('RobotoDraft-Regular'),
       local('Roboto-Regular'),
       url(../fonts/RobotoDraftRegular.woff2) format('woff2'),
       url(../fonts/RobotoDraftRegular.woff) format('woff');
}
If you don't have your fonts in woff2 format you can try some online converter like https://everythingfonts.com/woff-to-woff2
Mar 24, 2015 at 7:09 PM
Alright cool, I will try that out in the near future, thanks.

/Will.