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

Question

I followed the Web Fonts tutorial in qooxdoo documentation to add a web font to Font.js , but I notice there is a warning in Chrome's Developer Console:

My code is as follow:

/* ************************************************************************
  #asset(myApp/fonts/*)
************************************************************************ */
qx.Theme.define("myApp.theme.Font",
{
  extend : qx.theme.simple.Font,

  fonts :
  {
    "silkscreen" :
    {
        size: 8,
        lineHeight: 1,
        family: [ "silkscreen", "Tahoma" ],
        sources:
        [
            {
                family: "Silkscreen",
                source:
                [
                    "myApp/fonts/slkscr-webfont.eot",
                    "myApp/fonts/slkscr-webfont.ttf",
                    "myApp/fonts/slkscr-webfont.woff",
                    "myApp/fonts/slkscr-webfont.svg#silkscreen"
                ]
            }
        ]
    }
  }
});

How can I resolve the browser warning ?

score 97 · Accepted Answer · answered May 23 '13 at 07:48

97

According to the W3C spec, the correct MIME type is application/font-woff, so you need to configure your web server to use that when serving .woff files.

answered May 23 '13 at 07:48

Daniel Wagner

2,717
1
21
14

6

It works. After I added the line `AddType application/font-woff .woff` in `httpd.conf` of my Apache server's config (then restart server), the warning disappears. – Raptor May 23 '13 at 08:20
Tried this solution, the issue persists. This is in a dev environment using EasyPHP. – sq2 Jul 17 '13 at 02:09
Is the default value set by the Apache foundation? Can we get them to update it? – Ben Harold Jul 22 '13 at 19:25
2

Update: I submitted a bug report to the Apache foundation. Hopefully they'll update the default value in a future release. – Ben Harold Jul 22 '13 at 19:48
1

The following rules worked for me: AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff .woff AddType application/font-woff .woff – iamdash Aug 30 '13 at 14:03
1

@iamdash, thanks for posting your conf relating to other font types. But doesn't the 2nd directive for .woff simply override the 1st? IOW, I think you're only really setting .woff to application/font-woff and the next-to-last directive ("AddType application/x-font-woff .woff") is never applied. I think for .woff in particular, Daniel Wagner's answer remains correct. PS I used to see this console error, but in latest Chrome (29.0.1547.65, on OSX) my .woff font has type application/x-font-woff and does not trigger console errors. Maybe Chrome is suppressing the error now? /$.02 – cweekly Sep 19 '13 at 14:23

score 85 · Answer 2 · edited Jun 18 '14 at 15:11

85

If you are using an IIS webserver, give this a try:

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

edited Jun 18 '14 at 15:11

Will Eddins

13,628
5
51
85

answered Oct 09 '13 at 18:54

Abdullah SARGIN

1,646
1
13
19

Yes, this is the meaning of accepted answer, if the web server is in IIS. no need the `#` marks, right? – Raptor Oct 10 '13 at 02:17

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

2 Answers2

Linked