Skip to content

Instantly share code, notes, and snippets.

@paultreny
Forked from sergejmueller/ttf2woff2.md
Created June 17, 2014 19:20
Show Gist options
  • Save paultreny/5ac3ebd669f3c9764d54 to your computer and use it in GitHub Desktop.
Save paultreny/5ac3ebd669f3c9764d54 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 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

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