TTF to WOFF2 converting - README #font #converting

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 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

I 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.

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

Notes:

• @/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).
• Max TTF file size: 1 MB

Mac OS users can use the TTF to WOFF2 application (created with Automator). Drag your TTF file to the application, WOFF2 will be created.

Webdevelopers, make your life easier and webpages faster!

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

• Please no serverside GZIP compression for WOFF files, because WOFF already contains compressed data.
• Think about the correct mime type for WOFF 2.0 files (Google uses font/woff2. W3C recommends application/font-woff2):

NGINX: WOFF2 mime type

types {
    application/font-woff2  woff2;
}

APACHE: WOFF2 mime type

AddType  application/font-woff2  .woff2

Browser Support

• Google Chrome 36
• Opera 23

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 – Flattr | Twitter | Google+ | Projects