Question

I used @font-face

@font-face { // body font
    font-family: 'Sofia Pro Light';
    src: url('../library/fonts/Sofia Pro Light/SofiaProLight.eot');
    src: url('../library/fonts/Sofia Pro Light/SofiaProLight.eot?#iefix') format('embedded-opentype'),
         url('../library/fonts/Sofia Pro Light/SofiaProLight.woff') format('woff'),
         url('../library/fonts/Sofia Pro Light/SofiaProLight.ttf') format('truetype'),
         url('../library/fonts/Sofia Pro Light/SofiaProLight.otf') format('opentype'),
         url('../library/fonts/Sofia Pro Light/SofiaProLight.svg#font-name') format('svg');
    font-weight: normal;
    font-style: normal;
}

and here’s what Chrome Dev tool gives me

Should I ignore it? cuz everything seems to work fine.

Answer 1

I’d open up Fiddler and see if everything really is fine or not.

I’m assuming the files really are where you say they are. And so I suspect you’ve run into the same thing I did. Chrome is picky about the mime type. But the error message is misleading. Basically, when you don’t have the proper mime type coming from the server for WOFF files, then Chrome will failover to another font format. In this case it’s going to first failover to TTF fonts. This means that two different font formats will be downloaded in Chrome. Only, it looks like you’re getting an error with TTF fonts as well so Chrome is probably downloading 3 different formats in your case.

So this is worth fixing. All you need to do is configure your server to send application/x-font-woff as the MIME Type for WOFF files.

For example, in ASP.NET you’d add this to the web.config…

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