Proper MIME type for OTF fonts
Asked Answered
P

14

265

Searching the web, I find heaps of different suggestions for what the proper MIME type for a font is, but I have yet to try any MIME type that rids me of a Chrome warning such as the following:

Resource interpreted as font but transferred with MIME type font/otf

The font is an OTF.

I've tried the following MIME types so far

  • font/otf
  • application/font-otf
  • application/font
  • application/otf
  • application/octet-stream
  • application/x-font-otf
  • application/x-font-TrueType (I know it's not truetype, but one source quoted this for OTF)
Phonic answered 20/5, 2010 at 7:9 Comment(5)
How do you actually write the header for this? I'm not really sure what to do. Cheers for any help you can give.Thrombo
@Josh: if you're serving the font through code, you want to set the "content-type" header to "font/opentype" (if you're using an OTF as in my question), but if you're simply pointing to a physical font file, it might be easier to set the MIME types in your web server. I don't know what web server you're using, so do a google search for yourserver + mime types or start a new question on SO describing your problem.Phonic
The title is wrong. It should be "How do I silence the "resource interpreted as font" warning in ChromeIrreparable
@djs: granted! You know, if I could find a way to make Chrome remember that I want my console to list log messages and errors, but not warnings, there's a fair chance I would never have asked this question in the first place.Phonic
Chrome is warning us that it is doing what we asked. I'd rather see a warning when it successfully figured out the bitmaps to use for glyphs if you used @font-face with a .BMP file!Spaniel
A
145

Try using "font/opentype".

Athwartships answered 25/5, 2010 at 18:28 Comment(8)
@busticated, how'd you decide on this one? is it emerging as a standard? (works for me, and i wrote up a request on fontsquirrel to use it in their font-face generator... fontsquirrel.com/forum/discussion/361/mime-type-for-woff )Cantwell
Works for me in Chrome 22 and Firefox 15 (Mac), on both SVG and WOFF inlined fonts.Sumerian
I'm getting the same error as in the above question but I don't know where to put the MIME type "font/opentype"... Does this go in the header of the html page?Edlyn
Where should this be added? Thanks!Peel
@ToniMichelCaubet in IIS go to your website and then choose the MIME Types module. Doubleclick the extension and change accordingly.Miki
font type is now official iana.org/assignments/media-types/media-types.xhtml#fontGangrel
I tried it and it is not working, as @dtech mentioned application/x-font-opentype works well. I have tried it for .otf font file.Deodorant
https://mcmap.net/q/75521/-proper-mime-type-for-otf-fonts is now the correct answer, and font/otf is the correct MIME type for OpenType. See also developer.mozilla.org/en-US/docs/Web/CSS/@font-face.Chink
M
218

There are a number of font formats that one can set MIME types for, on both Apache and IIS servers. I've traditionally had luck with the following:

svg   as "image/svg+xml"                  (W3C: August 2011)
ttf   as "application/x-font-ttf"         (IANA: March 2013)
      or "application/x-font-truetype"
otf   as "application/x-font-opentype"    (IANA: March 2013)
woff  as "application/font-woff"          (IANA: January 2013)
woff2 as "application/font-woff2"         (W3C W./E.Draft: May 2014/March 2016)
eot   as "application/vnd.ms-fontobject"  (IANA: December 2005)
sfnt  as "application/font-sfnt"          (IANA: March 2013) 

According to the Internet Engineering Task Force who maintain the initial document regarding Multipurpose Internet Mail Extensions (MIME types) here: https://www.rfc-editor.org/rfc/rfc2045#section-5 ... it says in specifics:

"It is expected that additions to the larger set of supported types can generally be accomplished by the creation of new subtypes of these initial types. In the future, more top-level types may be defined only by a standards-track extension to this standard. If another top-level type is to be used for any reason, it must be given a name starting with "X-" to indicate its non-standard status and to avoid a potential conflict with a future official name."

As it were, and over time, additional MIME types get added as standards are created and accepted, therefor we see examples of vendor specific MIME types such as vnd.ms-fontobject and the like.

UPDATE August 16, 2013: WOFF was formally registered at IANA on January 3, 2013 and Webkit has been updated on March 5, 2013 and browsers that are sourcing this update in their latest versions will start issuing warnings about the server MIME types with the old x-font-woff declaration. Since the warnings are only annoying I would recommend switching to the approved MIME type right away. In an ideal world, the warnings will resolve themselves in time.

UPDATE February 26, 2015: WOFF2 is now in the W3C Editor's Draft with the proposed mime-type. It should likely be submitted to IANA in the next year (possibly by end of 2016) following more recent progress timelines. As well SFNT, the scalable/spline container font format used in the backbone table reference of Google Web Fonts with their sfntly java library and is already registered as a mime type with IANA and could be added to this list as well dependent on individual need.

UPDATE October 4, 2017: We can follow the progression of the WOFF2 format here with a majority of modern browsers supporting the format successfully. As well, we can follow the IETF's "font" Top-Level Media Type request for comments (RFC) tracker and document regarding the latest set of proposed font types for approval.


For those wishing to embed the typeface in the proper order in your CSS please visit this article. But again, I've had luck with the following order:

@font-face {
    font-family: 'my-web-font';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff2') format('woff2'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

For Subversion auto-properties, these can be listed as:

# Font formats
svg   = svn:mime-type=image/svg+xml
ttf   = svn:mime-type=application/x-font-ttf
otf   = svn:mime-type=application/x-font-opentype
woff  = svn:mime-type=application/font-woff
woff2 = svn:mime-type=application/font-woff2
eot   = svn:mime-type=application/vnd.ms-fontobject
sfnt  = svn:mime-type=application/font-sfnt
Mowry answered 2/6, 2012 at 17:6 Comment(3)
Good ones, thanks. I had error messages with .woff and this fixed it in my .htaccess file. I used AddType application/x-font-woffCrippling
application/x-font-opentype and application/x-font-ttf work perfectly for Linux Gnome ShellEri
The ttf, otf and woff2 are outdated. See https://mcmap.net/q/75521/-proper-mime-type-for-otf-fontsLatrishalatry
A
145

Try using "font/opentype".

Athwartships answered 25/5, 2010 at 18:28 Comment(8)
@busticated, how'd you decide on this one? is it emerging as a standard? (works for me, and i wrote up a request on fontsquirrel to use it in their font-face generator... fontsquirrel.com/forum/discussion/361/mime-type-for-woff )Cantwell
Works for me in Chrome 22 and Firefox 15 (Mac), on both SVG and WOFF inlined fonts.Sumerian
I'm getting the same error as in the above question but I don't know where to put the MIME type "font/opentype"... Does this go in the header of the html page?Edlyn
Where should this be added? Thanks!Peel
@ToniMichelCaubet in IIS go to your website and then choose the MIME Types module. Doubleclick the extension and change accordingly.Miki
font type is now official iana.org/assignments/media-types/media-types.xhtml#fontGangrel
I tried it and it is not working, as @dtech mentioned application/x-font-opentype works well. I have tried it for .otf font file.Deodorant
https://mcmap.net/q/75521/-proper-mime-type-for-otf-fonts is now the correct answer, and font/otf is the correct MIME type for OpenType. See also developer.mozilla.org/en-US/docs/Web/CSS/@font-face.Chink
I
126

Ignore the chrome warning. There is no standard MIME type for OTF fonts.

font/opentype may silence the warning, but that doesn't make it the "right" thing to do.

Arguably, you're better off making one up, e.g. with "application/x-opentype" because at least "application" is a registered content type, while "font" is not.

Update: OTF remains a problem, but WOFF grew an IANA MIME type of application/font-woff in January 2013.

Update 2: OTF has grown a MIME type: application/font-sfnt In March 2013. This type also applies to .ttf

Irreparable answered 11/1, 2011 at 11:25 Comment(7)
Interesting. Do you have any references that back this up?Tripper
There is no mime type: "Note: Because there are no defined MIME types for TrueType, OpenType, and WOFF fonts, the MIME type of the file specified is not considered." developer.mozilla.org/en/css/@font-face . Don't make up new top-level mime-types, use x- instead: tools.ietf.org/html/rfc2045#section-5 – djsadinoff 3 mins ago editIrreparable
@Irreparable I believe IANA supersedes the IETF. IETF submits drafts to IANA, and since IANA reports that woff is a MIME type, then IETF is overridden in its limited listing.Mowry
@MikeKormendy, I don't understand your comment, but you may have been referring to a previous version of my answer which only addresses WOFF. I've restored the originalIrreparable
@Irreparable That's odd, stack exchange said that you had just commented on that "3 mins ago".Mowry
If you use "application/font-sfnt" for OTF files, then Google Chrome 37 will complain with: "Resource interpreted as Font but transferred with MIME type application/font-sfnt". So better use "font/otf" for OTF files.Distillery
...And so we've come full circle. Sounds to me like the MIME type is right, and the warning is wrong.Irreparable
L
105

Since Feb 2017 RFC 8081 groups all MIME types for fonts under the top level font media type. The older MIME types from my original posting are now listed as deprecated.

Font types as listed by IANA are now:

Other non-standard font formats are left as are:


[Outdated Original Post]

As there's still a lot of confusion on the web about MIME types for web fonts, I thought I'd give a current answer, complete with effective dates, and supporting links to IANA and the W3C.

Here are the official MIME types for Web Fonts:

Note there is a movement to change all the above to MIME types of font/XXX, as backed by the W3C in its proposal for WOFF v2. This is being tracked by the Internet Engineering Task Force (IETF) under The font Top Level Type and in February 2017 was approved RFC status (see RFC 8081) so it may all change yet!

While on the topic of web servers, it's worth mentioning that HTTP responses may gzip (or otherwise compress) all the above font formats except .woff & .woff2 which are already heavily compressed.

I say more in MIME Types for Web Fonts with (Fantom) BedSheet.

Literalminded answered 21/12, 2013 at 20:44 Comment(2)
@SteveEynon : Presto based Opera does not render ꜱᴠɢ fonts served with an image mime type.Bistoury
This is in line with what Mozilla lists as common MIME types for browsers.Hippopotamus
H
16

As a specific instance of one of the two hard things in computing, it’s interesting to see how the answers to this question have changed since this question was originally posted. Thankfully, the powers that be have brought order to the chaos:


In February this year (2017), the W3C published the Standards Track RFC 8081: The "font" Top-Level Media Type which greatly simplifies the appropriate media types for font files:

This memo serves to register and document the "font" top-level media type, under which subtypes for representation formats for fonts may be registered. This document also serves as a registration application for a set of intended subtypes, which are representative of some existing subtypes already in use, and currently registered under the "application" tree by their separate registrations.

It’s quite a readable document and it describes the historical context (lack of “a registration of formats for font”) which gave rise to the confusing mix of media types and sub-types. With the (relatively) recent rise in popularity of downloadable web fonts, the W3C recognised the need for an “intuitive top-level font type”. What they came up with is … font.

Accordingly, the IANA have since updated their official list of Media types with the font media type and all its sub-types that they currently recognise:

collection  font/collection
otf     font/otf
sfnt    font/sfnt
ttf     font/ttf
woff    font/woff
woff2   font/woff2

Here’s hoping this is the last answer this question needs.

Highsounding answered 10/4, 2017 at 11:9 Comment(1)
Anthony, this is another great resource in addition to my post. Thanks for sharing this here!Mowry
A
8

NGINX solution

file

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

add

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

remove

application/octet-stream        eot;

Ref

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

Abhor answered 10/7, 2013 at 10:38 Comment(0)
M
6

FWIW regarding Apache 2.2 VirtualHosting and mod_mime tested on Debian Linux and OS X Leopard and Snow Leopard:

If you have a VirtualHost configuration you will want to add the types via the AddType Directive as follows at least at the bottom of the configuration as follows:

....
   AddType font/opentype .otf
   AddType font/ttf .ttf
</VirtualHost>

Tested against Chrome Unstable/Trunk and Safari WebKit Nightly which eliminates the mime octet-stream warnings for both the ttf and otf font types.

Note: .htaccess has zero effect when dealing with VirtualHosting. If you're developing for several sites you'll be using VirtualHosting development and each configuration will need these AddType additions.

Metalworking answered 7/2, 2011 at 15:33 Comment(0)
R
6

I just did some research on IANA official list. I believe the answer given here 'font/xxx' is incorrect as there is no 'font' type in the MIME standard.

Based on the RFCs and IANA, this appears to be the current state of the play as at May 2013:

These three are official and assigned by IANA:

  • svg as "image/svg+xml"
  • woff as "application/font-woff"
  • eot as "application/vnd.ms-fontobject"

These are not not official/assigned, and so must use the 'x-' syntax:

  • ttf as "application/x-font-ttf"
  • otf as "application/x-font-opentype"

The application/font-woff appears new and maybe only official since Jan 2013. So "application/x-font-woff" might be safer/more compatible in the short term.

Retroflexion answered 9/5, 2013 at 9:36 Comment(0)
A
5

As from March 2013 IANA.ORG recommends for .otf:
application/font-sfnt

Other fonts:

.eot  ->  application/vnd.ms-fontobject (as from December 2005)
.otf  ->  application/font-sfnt         (as from March 2013)
.svg  ->  image/svg+xml                 (as from August 2011)
.ttf  ->  application/font-sfnt         (as from March 2013)
.woff ->  application/font-woff         (as from January 2013)

See more...

Atypical answered 31/3, 2016 at 13:9 Comment(0)
A
2

The following can be used in the eBook space:

application/vnd.ms-opentype

I would imagine that it is the same for the web.

Adigun answered 23/10, 2012 at 22:37 Comment(0)
H
2

application/font-woff for woff: http://www.iana.org/assignments/media-types/application/font-woff

Houghton answered 14/2, 2013 at 15:39 Comment(0)
C
2

As of February 2017, RFC 8081 adds font/* media types, which are also listed in the IANA Media Types list. font/otf is in this list.

Caresse answered 31/3, 2017 at 8:29 Comment(0)
S
1

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

Stampede answered 20/3, 2012 at 16:56 Comment(1)
application/octet-stream is less a "known type" and more a "generic bunch of bytes". :) The browser's complaining about being served this type, because it carries no info about how the stuff should be interpreted.Amaze
S
-1

One way to silence this warning from Chrome would be to update Chrome and then make sure your mime type is one of these:

 "font/ttf"
 "font/opentype"
 "application/font-woff"
 "application/x-font-type1"
 "application/x-font-ttf"
 "application/x-truetype-font"

This list is per the patch found at Bug 111418 at webkit.org.

The same patch demotes the message from a "Warning" to a "Log", so just upgrading Chrome to any post March-2013 version would get rid of the yellow triangle.

Since the question is about silencing a Chrome warning, and folks might be holding on to old Chrome versions for whatever reasons, I figured this was worth adding.

Spaniel answered 29/5, 2014 at 17:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.