Chrome: Resource interpreted as Font but transferred with MIME type font/x-woff

When loading one of my website in Chrome, I noticed the following error message in the JavaScript console:

Resource interpreted as Font but transferred with MIME type font/x-woff: “https://xxx.xxx/xxx.woff”.

Actually it looks like it took too long to define and official MIME type for WOFF fonts and a few different MIME types have been used until the official one was defined:

  • font/x-woff
  • application/x-font-woff
  • application/font-woff – This is actually the official MIME type for WOFF fonts
  • font/woff

By default IIS7 will not know what to do with the WOFF font file, so you will get a 404 error when fetching it.

In my case I was using some third party files which defined the following in order to solve the 404 error:

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

But this MIME type is now not in use anymore. So I tried the following:

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

And the error in the console¬†was gone. Actually using application/x-font-woff instead of¬†application/font-woff also works. This is probably because for a very long time, Chrome didn’t support the new MIME type and really expected application/x-font-woff.

If you’re using Apache as a Web Server, you will need to add the AddType directive to your .htaccess file:

AddType application/font-woff .woff

Note that you may get any of the following error messages which basically all mean that the mime type provided is not the expected one and you need to update the configuration of your web server:

resource interpreted as font but transferred with mime type font/x-woff
resource interpreted as font but transferred with mime type application/octet-stream
resource interpreted as font but transferred with mime type application/x-woff
resource interpreted as font but transferred with mime type application/x-font-otf
resource interpreted as font but transferred with mime type font/woff
resource interpreted as font but transferred with mime type font/truetype

If you have a similar problem with other types of files, please refer to the official list of Media Types (formerly called MIME types).

Leave a Reply

Your email address will not be published. Required fields are marked *