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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Reference for adding font mime types to  NET IIS  via web config   lt system webServer gt     lt staticContent gt        lt  -- remove first in case they are defined in IIS already  which would cause a runtime error -- gt        lt remove fileExtension   woff    gt        lt remove fileExtension   woff2    gt        lt mimeMap fileExtension   woff  mimeType  font woff    gt        lt mimeMap fileExtension   woff2  mimeType  font woff2    gt     lt  staticContent gt   lt  system webServer gt    via IIS Manager

User · Answer

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

User · Answer

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  lt IfModule mod rewrite c gt      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   lt  IfModule gt    lt IfModule  mod rewrite c gt        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  lt  IfModule gt

User · Answer

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

User · Answer

I have had the same problem  font opentype worked for me

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Add the following to your  htaccess  AddType font woff woff   good luck

User · Answer

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

[embedded-fonts] Mime type for WOFF fonts?

Examples related to embedded-fonts

Examples related to woff