Proper MIME type for .woff2 fonts

fonts mime-types woff woff2

Today I updated Font Awesome package to 4.3.0 and noticed that woff2 font was added. That file is linked in CSS so I need to configure nginx to serve woff2 files properly.

Currently I have this block in nginx config for fonts:

location ~* \.(otf|eot|woff|ttf)$ {
    types     {font/opentype otf;}
    types     {application/vnd.ms-fontobject eot;}
    types     {font/truetype ttf;}
    types     {application/font-woff woff;}
}

What is proper mime type for woff2 fonts?

Here's how to cache woff2 files in Apache: <IfModule mod_mime.c> AddType font/woff2 woff2 and <IfModule mod_expires.c> ExpiresActive On ExpiresByType font/woff2 "access plus 1 month". (Closing tags and newlines omitted.)

Steven Anderson

In IIS you can declare the mime type for WOFF2 font files by adding the following to your project's web.config:

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

Update: The mime type may be changing according to the latest W3C Editor's Draft WOFF2 spec. See Appendix A: Internet Media Type Registration section 6.5. WOFF 2.0 which states the latest proposed format is font/woff2

Now MIME-types in IIS 10 was support .woff2. With IIS 10 you don't need to change anything in web.config.

What purpose does the <remove> tag serve here? It doesn't seem to be documented in the IIS reference (iis.net/configreference)

@Pathogen Sometimes IIS throws an error if the mimeMap already exists. Removing it before adding it fixes that error.

atwright147

font/woff2

For nginx add the following to the mime.types file:

font/woff2 woff2;

Old Answer

The mime type (sometime written as mimetype) for WOFF2 fonts has been proposed as application/font-woff2.

Also, if you refer to the spec (http://dev.w3.org/webfonts/WOFF2/spec/) you will see that font/woff2 is being discussed. I suspect that the filal mime type for all fonts will eventually be the more logical font/* (font/ttf, font/woff2 etc)...

N.B. WOFF2 is still in 'Working Draft' status -- not yet adopted officially.

This has been updated. The spec makes it very clear. Type is font and subtype is woff2 which makes is font/woff2. This is also what Google Fonts itself uses.

I still cannot see anything definitive in the spec. Though they do talk about wanting to introduce a font/* top level type. I think in the interests of full information, I will add that to my answer.

@atwright147 the mime types are covered in appendix A, for Woff2 it is section 6.5 of appendix A.

Updated March 2016: it is now a candidate recommendation and font/woff2 is the mimetype w3.org/TR/WOFF2/#IMT

when I gzip woff2 the file gets larger - unlike my CSS and JS files which are shrunk massively - maybe its already compressed?

Fizzix

Apache

In Apache, you can add the woff2 mime type via your .htaccess file as stated by this link.

AddType  application/font-woff2  .woff2

IIS

In IIS, simply add the following mimeMap tag into your web.config file inside the staticContent tag.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

what about application/x-font-woff2

Hey @Moes :) Acutally, application/x-font-woff2 is the old type for when woff2 was very new. The W3C Spec now recommends using application/font-woff2 since that is widely supported. If you're after backwards compatibility, feel free to also include x-font-woff2.

In IIS, be careful to remove any previously defined extension entries in case they are defined somewhere else in the server. This will give you very confusing errors if you encounter it! <remove fileExtension=".woff2" /> and then define it as above :)

Note that the proposed and also most probably be accepted is font/woff2

The W3C Recommendation for WOFF File Format 2.0 now recommend using font/woff2 as the MIME type but the IANA list of official media types does not (yet) include WOFF2.

Community

http://dev.w3.org/webfonts/WOFF2/spec/#IMT

It seem that w3c switched it to font/woff2

I see there is some discussion about the proper mime type. In the link we read:

This document defines a top-level MIME type "font" ... ... the officially defined IANA subtypes such as "application/font-woff" ... The members of the W3C WebFonts WG believe the use of "application" top-level type is not ideal.

and later

6.5. WOFF 2.0

    Type name:

        font
    Subtype name:

        woff2

So proposition from W3C differs from IANA.

We can see that it also differs from woff type: http://dev.w3.org/webfonts/WOFF/spec/#IMT where we read:

Type name:

    application
Subtype name:

    font-woff

which is

application/font-woff

http://www.w3.org/TR/WOFF/#appendix-b

I don't see anything on that page to suggest that it has been changed to font/woff2 can you calrify please?

Maybe I missunderstand it. I mean Appendix A, '6.5. WOFF 2.0'

Can't imagine that this is downvoted. The spec makes it very clear. Type is font and subtype is woff2 which makes is font/woff2. This is also what Google Fonts itself uses.

I upvoted this initially but and thought I could get a blog post out of this. As it stands this post is inline with the WOFF2 spec but that is still a Working Draft and hasn't been moved to Recommendation Status yet. This means woff2 doesn't technically have a mime as the font/woff2 is invalid until it's approved but the spec document has revoked the endorsement of application/font-woff2 leaving us with no official one. Therefore I think at this point I'm going to use application/font-woff2.

@rtpHarry I previously upvoted both this answer and your comment. As of February 2017, the W3C published the Standards Track RFC 8081, making font/woff2 the official media type. See stackoverflow.com/a/43321601/1640661

Proper MIME type for .woff2 fonts

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US