Skip to content

Instantly share code, notes, and snippets.

@sergejmueller

sergejmueller/ttf2woff2.md

Last active November 15, 2025 22:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.
Download ZIP
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
Raw
ttf2woff2.md

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 will be available from Chrome M36 (beta) and there on.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

I have installed Googles compression library on a DigitalOcean (ref) server. Feel free to start the convert from TTF to WOFF2. No software installation required. Simply use your terminal window.

Mac OS users can use the TTF to WOFF2 application (created with Automator). Drag your TTF file to the application, the WOFF2 file will be created.

Terminal make the magic
curl --data-binary "@/local/path/font.ttf" -o "/local/path/font.woff2" -H "Content-Type: font/ttf" -H "Accept: font/woff2" -X POST http://188.226.250.76

Notes:

  • @/local/path/font.ttf is the local path to your TTF file (including the leading @ character).
  • /local/path/font.woff2 is the local path for the converted WOFF2 file.
  • Please don't change the header (Content-Type and Accept).
  • Max TTF file size: 1 MB

Webdevelopers, make your life easier and webpages faster!

Embed WOFF2 in CSS

@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

  • 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 {
    font/woff2  woff2;
}
APACHE: WOFF2 mime type
AddType  font/woff2  .woff2

Browser Support

  • Google Chrome 36

Helpful links

Powered by

Sergej Müller – Twitter | Google+ | Projects

@sergejmueller
Copy link
Author

sergejmueller commented Sep 9, 2014

@reklis
Thanks.

@phloe
Copy link

phloe commented 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

@phloe
Copy link

phloe commented 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... :(

@tomByrer
Copy link

tomByrer commented Oct 10, 2014

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

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

@danielguillan
Copy link

danielguillan commented Oct 24, 2014

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

@mpybkk
Copy link

mpybkk commented Nov 3, 2014

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

@shaunbent
Copy link

shaunbent commented Nov 5, 2014

+1 on a command-line option!

@CrocoDillon
Copy link

CrocoDillon commented 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! :)

@paamayim
Copy link

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
Copy link

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
Copy link

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
Copy link

ElijahLynn commented 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

@richiebee
Copy link

richiebee commented Jan 15, 2015

use .ahtacess works for me

@zachleat
Copy link

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
Copy link

wayann commented Feb 16, 2015

@zachleat +1

@cvrebert
Copy link

cvrebert commented 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

@jimmywarting
Copy link

jimmywarting commented 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

@PhilAndrew
Copy link

PhilAndrew commented Jun 1, 2015

Does it work in SVG?

@boblauer
Copy link

boblauer commented 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.

@blaja
Copy link

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
Copy link

jungshik commented Sep 19, 2015

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

@nfroidure
Copy link

nfroidure commented 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

@jimmylee
Copy link

jimmylee commented Dec 28, 2015

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

@tomByrer
Copy link

tomByrer commented Feb 29, 2016

@meanjim woff2-to-otf then otf-to-woff.

@Haroenv
Copy link

Haroenv commented Aug 13, 2016

Safari 10 should have support for it too.

@anthony-geoghegan
Copy link

anthony-geoghegan commented Nov 8, 2016

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

@lazylester
Copy link

lazylester commented 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)?

@angristan
Copy link

angristan commented Feb 14, 2018

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

@orynider
Copy link

orynider commented Apr 21, 2021

@eladkarako Why you do not make an .7z for win32 as this one: https://github.com/aj-ash/woff2/releases ?

@3xploiton3
Copy link

3xploiton3 commented Nov 19, 2022

how to view woff2 in windows 11?

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