### Prolog

Google Chrome Developers [says](http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html):
> 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](https://code.google.com/p/font-compression-reference/) on a [DigitalOcean](https://www.digitalocean.com/?refcode=8e93f78ed2ab) _(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

```bash
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

```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

```nginx
types {
    font/woff2  woff2;
}
```

###### APACHE: WOFF2 mime type

```apache
AddType  font/woff2  .woff2
```


### Browser Support

* Google Chrome 36


### Helpful links

* [W3C: WOFF File Format 2.0](http://www.w3.org/TR/WOFF2/)
* [A better web font compression format: WOFF 2.0](https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion)
* [Progress on smaller and more colorful fonts](http://lwn.net/Articles/573348/)
* [How to test WOFF 2.0](https://code.google.com/p/font-compression-reference/wiki/testing_woff2)
* [WOFF 2.0 Compression on Google Fonts](https://docs.google.com/spreadsheet/ccc?key=0AvcH1ZzSrGMGdGl6MGRhdVRzYjN3T1NZSTBLM0ZUMnc#gid=0)


### Powered by
Sergej Müller – [Twitter](https://twitter.com/wpseo) | [Google+](https://plus.google.com/110569673423509816572?rel=author) | [Projects](http://wpcoder.de)