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

• http://www.fontsquirrel.com/tools/webfont-generator
• http://everythingfonts.com/ttf-to-woff2

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

• Can I use WOFF2
• 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