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.

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. Web developers, make your life easier and webpages faster!

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

Required adjustments:

@/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).

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 value for WOFF 2.0 web fonts (Google uses font/woff2 as mime type):

NGINX: WOFF2 mime type

types {
    font/woff2  woff2;
}

APACHE: WOFF2 mime type

AddType  font/woff2  .woff2

paultreny/ttf2woff2.md