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');
}

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

Browser Support

• Google Chrome 36

Helpful links

• W3C: WOFF File Format 2.0
• A better web font compression format: WOFF 2.0
• Progress on smaller and more colorful fonts
• How to test WOFF 2.0
• WOFF 2.0 Compression on Google Fonts

Powered by

Sergej Müller – Twitter | Google+ | Projects