I'm using @font-face
on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff
file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don't get a 404 so I know it's not a syntax error.
Also, I used fontsquirrels tool to create the @font-face
fonts and code:
@font-face {
font-family: 'LaurenCBrownRegular';
src: url('/laurencb-webfont.eot');
src: local('☺'),
url('/laurencb-webfont.woff') format('woff'),
url('/laurencb-webfont.ttf') format('truetype'),
url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FontinSansRegular';
src: url('/fontin_sans_r_45b-webfont.eot');
src: local('☺'),
url('/fontin_sans_r_45b-webfont.woff') format('woff'),
url('/fontin_sans_r_45b-webfont.ttf') format('truetype'),
url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
font-weight: normal;
font-style: normal;
}
In addition to Ian's answer, I had to allow the font extensions in the request filtering module to make it work.
Solved it:
I had to use Mo'Bulletproofer method
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
andfont/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:
Run IIS Server Manager (run command : inetmgr) Open Mime Types and add following
I tried a ton of things around permissions, mime types, etc, but for me it ended up being that the web.config had removed the Static file handler in IIS, and then explicitly added it back in for directories that would have static files. As soon as I added a location node for my directory and added the handler back, the requests stopped getting 404s.
IIS Mime Type: .woff font/x-woff (not application/x-woff, or application/x-font-woff)