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

by

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.

IIS 6 MIME Types

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>

More Related Contents:

  1. Are eot, ttf, and svg still necessary in the font-face declaration?
  2. Using custom fonts using CSS?
  3. CSS @font-face not working with Firefox, but working with Chrome and IE
  4. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  5. Wait for fonts to load before rendering web page
  6. Why should we include ttf, eot, woff, svg,… in a font-face
  7. @font-face EOT not loading over HTTPS
  8. @font-face anti-aliasing on windows and mac
  9. @font-face works in IE8 but not IE9
  10. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  11. @font-face src: local – How to use the local font if the user already has it?
  12. CSS @font-face – what does “src: local(‘☺’)” mean?
  13. Multiple font-weights, one @font-face query
  14. Google warning: Resource interpreted as Font but transferred with MIME type application/octet-stream
  15. Fallback fonts on special characters
  16. CSS @font-face not working in IE8
  17. font-face with wrong MIME type in Chrome
  18. Internet Explorer @font-face is failing
  19. Non-Standard fonts in web?
  20. On IE CSS font-face works only when navigating through inner links
  21. Using @font-face with Rails 3.1 app?
  22. Downloadable font on firefox: bad URI or cross-site access not allowed
  23. Fix custom font line-height with CSS
  24. Can you set a border opacity in CSS?
  25. Should I use pt or px?
  26. CSS Parent/Ancestor Selector [duplicate]
  27. Angular dynamic background images
  28. Scrollbar color change in Firefox
  29. Delay mouseout/hover with CSS3 transitions
  30. What CSS selector can be used to select the first div within another div

Leave a Comment