Mime type for WOFF fonts?

问题:

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?

回答1:

Update from Keith Shaw\'s comment on Jun 22, 2017:

As of February 2017, RFC8081 is the proposed standard. It defines a top-level media type for fonts, therefore the standard media type for WOFF and WOFF2 are as follows:

font/woff

font/woff2

---

In January 2011 it was announced that in the meantime Chromium will recognize

application/x-font-woff

as the mime-type for WOFF. I know this change is now in Chrome beta and if not in stable yet, it shouldn\'t be too far away.

回答2:

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   

回答3:

It will be application/font-woff.

see http://www.w3.org/TR/WOFF/#appendix-b (W3C Candidate Recommendation 04 August 2011)

and http://www.w3.org/2002/06/registering-mediatype.html

From Mozilla css font-face notes

In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction. Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered.

source: https://developer.mozilla.org/en/CSS/@font-face#Notes

回答4:

Reference for adding font mime types to .NET/IIS

via web.config

<system.webServer>
  <staticContent>
     <!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
     <remove fileExtension=\".woff\" />
     <remove fileExtension=\".woff2\" />
     <mimeMap fileExtension=\".woff\" mimeType=\"application/font-woff\" />
     <mimeMap fileExtension=\".woff2\" mimeType=\"application/font-woff2\" />
  </staticContent>
</system.webServer>

via IIS Manager

回答5:

NGINX SOLUTION

file

/etc/nginx/mime.types

or

/usr/local/nginx/conf/mime.types

add

font/ttf                      ttf;
font/opentype                 otf;
font/woff                     woff;
font/woff2                    woff2;
application/vnd.ms-fontobject eot;

remove

application/octet-stream        eot;

REFERENCES

RFC @02.2017

https://tools.ietf.org/html/rfc8081#page-15

https://www.iana.org/assignments/media-types/media-types.xhtml

Thanks to Mike Fulcher

http://drawingablank.me/blog/font-mime-types-in-nginx.html

回答6:

As of February 2017, RFC8081 is the proposed standard. It defines a top-level media type for fonts, therefore the standard media type for WOFF and WOFF2 are as follows:

font/woff
font/woff2

回答7:

There is no font MIME type! Thus, font/xxx is ALWAYS wrong.

回答8:

@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

回答9:

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

回答10:

Maybe this will help someone. I saw that on IIS 7 .ttf is already a known mime-type. It\'s configured as:

application/octet-stream

So I just added that for all the CSS font types (.oet, .svg, .ttf, .woff) and IIS started serving them. Chrome dev tools also do not complain about re-interpreting the type.

Cheers, Michael

回答11:

Add the following to your .htaccess

AddType font/woff woff

good luck

回答12:

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

回答13:

IIS automatically defined .ttf as application/octet-stream which seems to work fine and fontshop recommends .woff to be defined as application/octet-stream

回答14:

For all Solution index.php remove form url and woff file allowed. for write below code in .htaccess file and and make this alternation to your application/config/config.php file: $config[\'index_page\'] = \'\';

For only Linux hosting server. .htaccess file details

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #\'system\' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn\'t in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename \'application\' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn\'t true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don\'t have mod_rewrite installed, all 404\'s
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>

回答15:

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!

回答16:

I have had the same problem, font/opentype worked for me

回答17:

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.