Mime type for WOFF fonts?

Question

What mime type should WOFF fonts be served as?

I am serving truetype (ttf) fonts as font/truetype and opentype (otf) as font/opentype, but I cannot find the correct format for WOFF fonts.

I have tried font/woff, font/webopen, and font/webopentype, but Chrome still complains:

"Resource interpreted as font but transferred with MIME type application/octet-stream."

Anybody know?

Answer 1

For me, the next has beeen working in an .htaccess file.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   

Answer 2

Mime type might not be your only problem. If the font file is hosted on S3 or other domain, you may additionally have the issue that Firefox will not load fonts from different domains. It's an easy fix with Apache, but in Nginx, I've read that you may need to encode your font files in base-64 and embed them directly in your font css file.

Answer 3

@Nico,

Currently there is no defined standard for the woff font mime type. I use a font delivery cdn service and it uses font/woff and I get the same warning in chrome.

Reference: The Internet Assigned Numbers Authority

Answer 4

I know this post is kind of old but after spending many hours on trying to make the fonts work on my nginx local machine and trying a tons of solutions i finally got the one that worked for me like a charm.

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

Inside the parenthesis you can put the extensions of your fonts or generally the files that you want to load. For example i used it for fonts and for images(png,jpg etc etc) as well so don't get confused that this solution applies only for fonts.

Just put it into your nginx config file, restart and i hope it works also for you!

Answer 5

WOFF:

1. Web Open Font Format
2. It can be compiled with either TrueType or PostScript (CFF) outlines
3. It is currently supported by FireFox 3.6+

Try to add that:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

Answer 6

Thing that did it for me was to add this to my mime_types.rb initializer:

Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'

and wipe out the cache

rake tmp:cache:clear

before restarting the server.

Source: https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509