Skip to content

Instantly share code, notes, and snippets.

@sfelde
Forked from sergejmueller/ttf2woff2.md
Created May 29, 2014 21:39
Show Gist options
  • Select an option

  • Save sfelde/fea1c6f247ede0411bf1 to your computer and use it in GitHub Desktop.

Select an option

Save sfelde/fea1c6f247ede0411bf1 to your computer and use it in GitHub Desktop.

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.

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

Powered by

Sergej Müller – Twitter | Google+ | Projects

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