[GabrielParticipant]

Hello,

GTMetrix raised a flag concerning a Google font:

Compressing https://fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C700%2C700italic&subset=latin%2Clatin-ext&ver=4.6.0 could save 2.3KiB (79% reduction).

Following the URL one clearly sees the mime type WOFF2. This is neither among the default mime types of nginx, nor of WordPress (https://codex.wordpress.org/Function_Reference/get_allowed_mime_types#Default_allowed_mime_types). Searching this forum you recommend one of these:

application/font-woff2	woff2
application/x-font-woff	woff2

But according to W3.org it should be (https://dev.w3.org/webfonts/WOFF2/spec/#IMT)

font/woff2

Comments?

Regards,
Gabriel

[RupokMember]

Hi Gabriel,

woff2 is a valid mime type and even Google Fonts using this mime type. So not sure what’s wrong with that. If nginx doesn’t exists on default mime type, you can declare that.

Thanks

[GabrielParticipant]

Yes, but which mime type is the correct?

application/font-woff2
application/x-font-woff
font/woff2

Or is this fetched directly from Google so I can’t affect that?

[RupokMember]

Hi there,

Both are correct and necessary to show the font correctly across different browsers. Some older browser might not be able to render correctly and woff needed as fallback.

Support for woff can be checked at http://caniuse.com/woff
Support for woff2 can be checked at http://caniuse.com/woff2

Hope this makes sense.

[GabrielParticipant]

Perhaps I use the terminology wrong, we seem to misunderstand each other. I do want support for both woff and woff2. Woff is already declared by default, the question is how to declare woff2 for nginx? In /etc/nginx/mime.types woff is declared as such:

application/font-woff woff;

I suppose it matters how I declare it? According to https://www.w3.org/2002/06/registering-mediatype2014.html it should be declared as such:

font/woff2 woff;

But when I look around this forum I find these two alternatives:

application/x-font-woff woff2;
application/font-woff2 woff2;

See here for example:
https://community.theme.co/kb/solutions-to-potential-setup-issues-font-awesome/
https://community.theme.co/forums/topic/missing-ui-elements-in-cornerstone/

So which of the three (!) alternatives should I put in /etc/nginx/mime.types ?

[RupokMember]

Hi there,

application/x-font-woff and application/font-woff are just naming structure where first one is the specific naming and the second one was example as they don’t know which name/directory the fonts are belong. You need to use the right directory like below :

<staticContent>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
</staticContent>

Hope this makes sense.

[GabrielParticipant]

Hello,

I’m not sure if you are referring to directories, as they are not directories but identifiers of the form type/subtype.

The types are organized into trees, where some become registered as official standards. This is the latest proposal according to W3C Editor’s Draft WOFF2 specification:

font/woff2

This may change however, the previous proposal was this (no. 3 in my list above):

application/font-woff2

Now, “different structures of sub-type names can be registered in registration ‘trees’ that are distinguished by the use of faceted names”, i.e. the subtype is prefixed with for example ‘x.’.

The ‘x.’ tree is intended for “use in private, local environments and only with the active agreement of the parties exchanging them. Types in this tree cannot be registered.” But “according to RFC 6838 (published in January 2013), any use of types in the ‘x.’ tree is strongly discouraged. Media types with names beginning with ‘x-‘ are no longer considered to be members of this tree since January 2013.” (https://en.wikipedia.org/wiki/Media_type)

So this identifier is part of the unregistered x. tree and it seems to identify ‘woff’ rather than ‘woff2’:

application/x-font-woff

The question remains, which to use? Since the question started by referring to a Google font, and Google themselves use ‘font/woff2’, which also happens to be the latest draft proposal. So I’ll go for ‘font/woff2’.

And last an interesting comment regarding compression, since this post was originally intended to solve a GTMetrix flag about compression:

“Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data.”

Read further:
http://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts
https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a

[RadModerator]

Hi there,

Yes, please follow the recommendation of your analysis tool. And yes, you shouldn’t compress the already compressed files.

Thanks for sharing!

[Author]

Posts