Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

Embed WOFF2 in CSS (with WOFF fallback)

@font-face {
	font-family: MyFont;
	src:
		url('myfont.woff2') format('woff2'),
		url('myfont.woff') format('woff');
}
Base64 Data-URI

Of course you can use WOFF2 as a Base64 encoded string:

@font-face {
	font-family: MyFont;
	src:
		url('data:font/woff2;base64,...') format('woff2'),
		url('data:font/woff;base64,...') format('woff');
}

Good to know

  • Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data.
  • Think about the correct mime type for WOFF 2.0 files (Google uses font/woff2. W3C recommends application/font-woff2):
NGINX: WOFF2 mime type
types {
    application/font-woff2  woff2;
}
APACHE: WOFF2 mime type
AddType  application/font-woff2  .woff2

Browser Support

  • Google Chrome 36
  • Opera 23
  • Firefox 35 (disabled by default)

Helpful links

Powered by

Sergej Müller

@kurtextrem

This comment has been minimized.

Show comment
Hide comment
@kurtextrem

kurtextrem Jul 24, 2014

Is there anything for Windows users, without cURL?

Is there anything for Windows users, without cURL?

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Jul 28, 2014

You can add Opera 23 to the list of browsers supporting WOFF 2.0.

You can add Opera 23 to the list of browsers supporting WOFF 2.0.

@sergejmueller

This comment has been minimized.

Show comment
Hide comment
@sergejmueller

sergejmueller Jul 28, 2014

@mathiasbynens
Verified, accepted, edited ;) Thanks.

Owner

sergejmueller commented Jul 28, 2014

@mathiasbynens
Verified, accepted, edited ;) Thanks.

@sergejmueller

This comment has been minimized.

Show comment
Hide comment
Owner

sergejmueller commented Sep 9, 2014

@reklis
Thanks.

@rasmusfl0e

This comment has been minimized.

Show comment
Hide comment
@rasmusfl0e

rasmusfl0e Sep 19, 2014

Just for the record: using windows powershell 3+ the equivalent code to the curl example would be:

Invoke-RestMethod -InFile "/local/path/font.ttf" -OutFile "/local/path/font.woff2" -ContentType "font/ttf" -Headers @{"accept"="font/woff2"} -Method POST -Uri http://188.226.250.76

Just for the record: using windows powershell 3+ the equivalent code to the curl example would be:

Invoke-RestMethod -InFile "/local/path/font.ttf" -OutFile "/local/path/font.woff2" -ContentType "font/ttf" -Headers @{"accept"="font/woff2"} -Method POST -Uri http://188.226.250.76
@rasmusfl0e

This comment has been minimized.

Show comment
Hide comment
@rasmusfl0e

rasmusfl0e Sep 19, 2014

Sadly - glyphs that have a horizontal offset (mostly occurring in icon fonts) are normalized to zero while their bounding boxes stay the same. Results are glyphs that should've been centered in a box is now aligned left... :(

Sadly - glyphs that have a horizontal offset (mostly occurring in icon fonts) are normalized to zero while their bounding boxes stay the same. Results are glyphs that should've been centered in a box is now aligned left... :(

@tomByrer

This comment has been minimized.

Show comment
Hide comment
@tomByrer

tomByrer Oct 10, 2014

http://caniuse.com/#search=woff2

  • Chrome for Android 37, default browsers for Nexus 7 & Motorola Moto G

http://caniuse.com/#search=woff2

  • Chrome for Android 37, default browsers for Nexus 7 & Motorola Moto G
@danielguillan

This comment has been minimized.

Show comment
Hide comment
@danielguillan

danielguillan Oct 24, 2014

What are the command-line options for converting TTF to WOFF2?

What are the command-line options for converting TTF to WOFF2?

@mpybkk

This comment has been minimized.

Show comment
Hide comment
@mpybkk

mpybkk Nov 3, 2014

Wondering the same, is there still no command line options?

mpybkk commented Nov 3, 2014

Wondering the same, is there still no command line options?

@shaunbent

This comment has been minimized.

Show comment
Hide comment
@shaunbent

shaunbent Nov 5, 2014

+1 on a command-line option!

+1 on a command-line option!

@CrocoDillon

This comment has been minimized.

Show comment
Hide comment
@CrocoDillon

CrocoDillon Dec 3, 2014

What's missing from this gist is a feature test. We are using this one to detect WOFF2 supports https://github.com/filamentgroup/woff2-feature-test/blob/master/woff2.js

And serve WOFF or WOFF2 base64 encoded in a JSON file depending on the outcome. Basically like how The Guardian does it. This was an early prototype mimicking that behavior (without WOFF2 detection) http://codepen.io/CrocoDillon/pen/dkcbs , enjoy! :)

What's missing from this gist is a feature test. We are using this one to detect WOFF2 supports https://github.com/filamentgroup/woff2-feature-test/blob/master/woff2.js

And serve WOFF or WOFF2 base64 encoded in a JSON file depending on the outcome. Basically like how The Guardian does it. This was an early prototype mimicking that behavior (without WOFF2 detection) http://codepen.io/CrocoDillon/pen/dkcbs , enjoy! :)

@paamayim

This comment has been minimized.

Show comment
Hide comment
@paamayim

paamayim Dec 9, 2014

In case anyone else has tried to retrieve the google hosted .woff2 in latin subset only, it will show all subsets(for some reason). To avoid that, it's possible to include the full range of characters in the url:

http://fonts.googleapis.com/css?family=Open+Sans&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!%22#$%&'()*+,-./0123456789:;<=>?@[]^_`{|}~
See http://codepen.io/iautomation/pen/gbPwxe for an example

You can also download the full google font package on my site[ http://iautomation.us ] in case anyone wants to quickly grab the files to host locally..

paamayim commented Dec 9, 2014

In case anyone else has tried to retrieve the google hosted .woff2 in latin subset only, it will show all subsets(for some reason). To avoid that, it's possible to include the full range of characters in the url:

http://fonts.googleapis.com/css?family=Open+Sans&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!%22#$%&'()*+,-./0123456789:;<=>?@[]^_`{|}~
See http://codepen.io/iautomation/pen/gbPwxe for an example

You can also download the full google font package on my site[ http://iautomation.us ] in case anyone wants to quickly grab the files to host locally..

@arebee

This comment has been minimized.

Show comment
Hide comment
@arebee

arebee Dec 16, 2014

To add the MIME type on IIS use:

appcmd set config /section:staticContent /+"[fileExtension='.woff2',mimeType='application/font-woff2']"

arebee commented Dec 16, 2014

To add the MIME type on IIS use:

appcmd set config /section:staticContent /+"[fileExtension='.woff2',mimeType='application/font-woff2']"
@majodev

This comment has been minimized.

Show comment
Hide comment
@majodev

majodev Jan 4, 2015

You can also easily get woff2 files (and all other formats for any combined subset/charset) of any Google web font via my lil' service google-webfonts-helper.

Thanks for this great gist, I will embed it in a special FAQ on the front page of my service ASAP.

majodev commented Jan 4, 2015

You can also easily get woff2 files (and all other formats for any combined subset/charset) of any Google web font via my lil' service google-webfonts-helper.

Thanks for this great gist, I will embed it in a special FAQ on the front page of my service ASAP.

@ElijahLynn

This comment has been minimized.

Show comment
Hide comment
@ElijahLynn

ElijahLynn Jan 7, 2015

How come the woff2 mimetype has not been registered with the IANA?

http://stackoverflow.com/questions/27829408/why-isnt-woff2-in-the-mimetype-directory

How come the woff2 mimetype has not been registered with the IANA?

http://stackoverflow.com/questions/27829408/why-isnt-woff2-in-the-mimetype-directory

@richiebee

This comment has been minimized.

Show comment
Hide comment
@richiebee

richiebee Jan 15, 2015

use .ahtacess works for me

use .ahtacess works for me

@zachleat

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat Feb 6, 2015

Can you add a warning here about Data-URI embedding multiple file formats? It’s not a recommended practice, it negates the page weight benefits offered by WOFF2 if you include both Data URIs in a single file.

zachleat commented Feb 6, 2015

Can you add a warning here about Data-URI embedding multiple file formats? It’s not a recommended practice, it negates the page weight benefits offered by WOFF2 if you include both Data URIs in a single file.

@wayann

This comment has been minimized.

Show comment
Hide comment
@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 24, 2015

Google uses font/woff2

Could you please point to a specific example of this?

Edit: To answer my own question: http://www.google.com/fonts/
And here's hoping they rectify that: https://twitter.com/cvrebert/status/570155277648924672

Google uses font/woff2

Could you please point to a specific example of this?

Edit: To answer my own question: http://www.google.com/fonts/
And here's hoping they rectify that: https://twitter.com/cvrebert/status/570155277648924672

@jimmywarting

This comment has been minimized.

Show comment
Hide comment
@jimmywarting

jimmywarting Apr 3, 2015

http://onlinefontconverter.com has a online & a command tool to convert any font to woff2. You don't need to install any program. font-packs also works (you get one woff2 file for every font

http://onlinefontconverter.com has a online & a command tool to convert any font to woff2. You don't need to install any program. font-packs also works (you get one woff2 file for every font

@PhilAndrew

This comment has been minimized.

Show comment
Hide comment
@PhilAndrew

PhilAndrew Jun 1, 2015

Does it work in SVG?

Does it work in SVG?

@boblauer

This comment has been minimized.

Show comment
Hide comment
@boblauer

boblauer Jun 18, 2015

As someone who uses the Data-URI method, is there an option for loading the correct type from the server? As @zachleat said, it makes no sense to embed both in a single file.

As someone who uses the Data-URI method, is there an option for loading the correct type from the server? As @zachleat said, it makes no sense to embed both in a single file.

@blaja

This comment has been minimized.

Show comment
Hide comment
@blaja

blaja Jul 9, 2015

You can also add FF 39 stable to the list, it is enabled by default now, which is great.

blaja commented Jul 9, 2015

You can also add FF 39 stable to the list, it is enabled by default now, which is great.

@jungshik

This comment has been minimized.

Show comment
Hide comment
@jungshik

jungshik Sep 19, 2015

W3C now recommends font/woff and font/woff2 for WOFF and WOFF2. See
http://dev.w3.org/webfonts/WOFF2/spec/#IMT

W3C now recommends font/woff and font/woff2 for WOFF and WOFF2. See
http://dev.w3.org/webfonts/WOFF2/spec/#IMT

@nfroidure

This comment has been minimized.

Show comment
Hide comment
@nfroidure

nfroidure Sep 20, 2015

Hi guys. Made a NodeJS wrapper for the Google lib, thought you could be interested in adding it to this document: https://github.com/nfroidure/ttf2woff2

Hi guys. Made a NodeJS wrapper for the Google lib, thought you could be interested in adding it to this document: https://github.com/nfroidure/ttf2woff2

@jimmylee

This comment has been minimized.

Show comment
Hide comment
@jimmylee

jimmylee Dec 28, 2015

Is there a way to convert WOFF 2.0 to WOFF 1.0?

Is there a way to convert WOFF 2.0 to WOFF 1.0?

@tomByrer

This comment has been minimized.

Show comment
Hide comment
@Haroenv

This comment has been minimized.

Show comment
Hide comment
@Haroenv

Haroenv Aug 13, 2016

Safari 10 should have support for it too.

Haroenv commented Aug 13, 2016

Safari 10 should have support for it too.

@anthony-geoghegan

This comment has been minimized.

Show comment
Hide comment
@anthony-geoghegan

anthony-geoghegan Nov 8, 2016

@jungshik is right. The W3C now recommend using font/woff2 as the MIME type: https://www.w3.org/TR/WOFF2/#IMT

@jungshik is right. The W3C now recommend using font/woff2 as the MIME type: https://www.w3.org/TR/WOFF2/#IMT

@lazylester

This comment has been minimized.

Show comment
Hide comment
@lazylester

lazylester Sep 18, 2017

@anthony-geoghegan how can one figure out whether apache is using the W3C/IANA mime type (font/woff2) or the previous mime type (application/font-woff2)?

@anthony-geoghegan how can one figure out whether apache is using the W3C/IANA mime type (font/woff2) or the previous mime type (application/font-woff2)?

@Angristan

This comment has been minimized.

Show comment
Hide comment
@Angristan

Angristan Feb 14, 2018

@lazylester do a curl -I http://url/font.woff2 and check the Content Type header

@lazylester do a curl -I http://url/font.woff2 and check the Content Type header

@eladkarako

This comment has been minimized.

Show comment
Hide comment
@eladkarako

eladkarako Jul 2, 2018

woff2 for Windows (@kurtextrem)
https://github.com/eladkarako/1st_font_webkit_gen/tree/master/woff2
You need all the files in the folder.


made this lazy-man tool to make a webkit for me (with auto CSS generating):
https://github.com/eladkarako/1st_font_webkit_gen/archive/master.zip

drag&drop your file over webkit-generator.cmd.

woff2 for Windows (@kurtextrem)
https://github.com/eladkarako/1st_font_webkit_gen/tree/master/woff2
You need all the files in the folder.


made this lazy-man tool to make a webkit for me (with auto CSS generating):
https://github.com/eladkarako/1st_font_webkit_gen/archive/master.zip

drag&drop your file over webkit-generator.cmd.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment