Mime type for WOFF fonts?

Asked 29/8, 2010 at 12:56 Answered 28/3, 2019 at 11:2

579

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?

Peggy answered 29/8, 2010 at 12:56 Comment(4)

So there's no way to stop Chrome complaining? – Hy 23/9, 2010 at 8:24

Here is the Node.js / Meteor Solution: npm install mime – Extradition 17/5, 2013 at 3:26

also note the other config which at last fixed my problem in IIS #12458944 – Shrove 11/3, 2015 at 6:23

font/woff is now the correct MIME type for woff and Chrome doesn't complain. – Collette 7/11, 2018 at 9:12

762

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.

Cylindroid answered 28/2, 2011 at 13:1 Comment(12)

as of Chromium 18.0, 2012/08/30, need to use application/x-font-woff – Lh 31/8, 2012 at 11:36

As cc young said, in order to get rid of the Chrome warning "Resource interpreted as Font but transferred with MIME type application/font-woff" you need to use "application/x-font-woff" – Ab 2/1, 2013 at 17:20

Chrome Version 24.0.1312.52 seems to still reply with the "Resource interpreted as Font but transferred..." if you use application/font-woff. Seems still need to use "application/x-font-woff" for now. – Guarani 16/1, 2013 at 1:41

Chrome Version 24.0.1312.57 m does not show the warning for me with application/font-woff – Gorman 5/2, 2013 at 14:47

I see the warning on 24.0.1312.57, filed a Chromium bug. – Rondelle 7/2, 2013 at 9:59

I'm still seeing the warning on 27.0.1423.0. Do you have a link to the bug report @Rondelle ? – Asp 5/3, 2013 at 21:45

According to the following Webkit commit, font/woff and application/x-font-woff will be removed in favor of application/font-woff. Also, the warning has been downgraded to a log message. trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/… – Polygraph 16/3, 2013 at 18:9

I added AddType application/x-font-woff woff to my Apache httpd.conf file which fixes the error in Chrome browser but in Safari, I am now getting this error, "Resource interpreted as Font but transferred with MIME type font/woff." – Same 3/4, 2013 at 21:9

In addition to Jorrit Schippers comment, Webkit commit was updated after the MIME type was officially registered with IANA as based on the W3C Recommendation, as indicated here: iana.org/assignments/media-types/application/font-woff so the warning is obsolete now, and this root answer should be updated. – Pinhead 16/8, 2013 at 16:45

What about the new .woff2? – Talkative 25/2, 2015 at 23:0

update: I just had to set to font/woff on our IIS server to prevent 404s (which in turn broke some really brittle font-loader code) so I think this is now an ex-problem. – Copenhagen 27/7, 2017 at 17:45

Marcel's answer is not the correct answer anymore. Keith Shaw's answer https://mcmap.net/q/73174/-mime-type-for-woff-fonts is the correct one as ow now (since February 2017). – Eras 26/9, 2017 at 14:52

148

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

Leesaleese answered 3/10, 2011 at 8:27 Comment(8)

I can't believe more people haven't found this helpful. This is the only one that worked for me. – Claudine 28/10, 2011 at 18:8

At the time of asking this question 'font/woff' did not work. Can anyone confirm that it now does? – Peggy 7/2, 2012 at 0:3

Exactly what I was looking for. In rails, you need to add the following line to your initializer: Mime::Type.register "font/woff", :woff – Ocrea 18/4, 2012 at 20:45

In IIS Express, you can add a mimeMap element to web.config under configuration/system.webServer/staticContent: <mimeMap fileExtension=".woff" mimeType="font/woff" /> – Leaved 4/5, 2012 at 8:24

Worked fine when I changed the MIME types in IIS as well. Thanks! – Goodness 9/8, 2012 at 13:18

as of Chrome 18, stopped working. now application/x-font-woff seems to work. – Lh 31/8, 2012 at 11:37

Which on is correct solution? this or second answer in #7416140 – Zymogenesis 13/12, 2014 at 16:42

For the record, Google Fonts uses font/woff and font/woff2. – Poseur 17/6, 2016 at 17:13

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

Sleeper answered 20/4, 2011 at 21:15 Comment(2)

But as pointed by Marcel after, Chromium will recognize application/x-font-woff as per RFC 2048 until application/font-woff is accepted. – Sleeper 25/3, 2012 at 12:10

The WOFF spec is now a recommendation and will not change from application/font-woff w3.org/TR/WOFF/#appendix-b – Cormorant 13/12, 2012 at 15:9

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="font/woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

via IIS Manager

screenshot of adding woff mime types to IIS

Lobby answered 12/3, 2015 at 17:40 Comment(0)

NGINX SOLUTION

file

/etc/nginx/mime.types

/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://www.rfc-editor.org/rfc/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

Rosabelle answered 10/7, 2013 at 10:42 Comment(0)

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

Griefstricken answered 22/6, 2017 at 20:31 Comment(0)

Note: This answer was correct at it's time but became outdated in 2017 when RFC 8081 was released

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

Cogency answered 1/5, 2011 at 22:27 Comment(1)

@UmarFarooqKhawaja this answer is incomplete, but not wrong. The only thing that changed between this answer and your comment is application/font-woff was added to the standard, replacing such things as application/x-font-woff (actual software updating in practice is another matter). Nothing has made madey-uppey content-types of the form font/xxx valid. – Sculpturesque 21/8, 2014 at 9:15

Add the following to your .htaccess

AddType font/woff woff

good luck

Bathyscaphe answered 4/6, 2013 at 12:47 Comment(0)

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

Batting answered 19/2, 2013 at 19:58 Comment(0)

@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

Bhatt answered 4/9, 2010 at 5:30 Comment(0)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

This is a helpful list of mimetypes

Anaximander answered 28/3, 2019 at 11:2 Comment(0)

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!

Tomtit answered 19/7, 2018 at 15:12 Comment(0)

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

Stannite answered 20/3, 2012 at 16:56 Comment(2)

'application/octet-stream' is the web server equivalent of saying "I don't know what this is". – Henriques 26/4, 2012 at 15:2

Yes, I know. But the key point was that it worked whereas many of the more specific options didn't seem to result in the fonts being used over IIS7. My comment was more pragmatic than trying to be the most correct (because that wasn't working). – Stannite 27/4, 2012 at 15:17

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>

Homogeneous answered 29/6, 2015 at 5:9 Comment(0)

WOFF:

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

Try to add that:

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

Cumulative answered 4/9, 2010 at 10:16 Comment(0)

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

Unbated answered 3/12, 2010 at 6:59 Comment(0)

-1

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.

Bergsonism answered 25/2, 2013 at 20:32 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags