Skip to content

Instantly share code, notes, and snippets.

@gaybro8777

gaybro8777/ttf2woff2.md

Forked from sergejmueller/ttf2woff2.md
Created April 4, 2018 19:14
Show Gist options
  • Save gaybro8777/8bcfe137a0d32ee0a32af8614a348ebb to your computer and use it in GitHub Desktop.
Save gaybro8777/8bcfe137a0d32ee0a32af8614a348ebb to your computer and use it in GitHub Desktop.
Download ZIP
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
Raw
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

Embed WOFF2 in CSS (with WOFF fallback)

@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
  • Firefox 35 (disabled by default)

Helpful links

Powered by

Sergej Müller

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