Skip to content

Instantly share code, notes, and snippets.

@sergejmueller
Last active March 9, 2024 13:37
Show Gist options
  • Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.
Save sergejmueller/cf6b4f2133bcb3e2f64a to your computer and use it in GitHub Desktop.
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2

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 font/woff2 too):
NGINX: WOFF2 mime type
types {
    font/woff2  woff2;
}
APACHE: WOFF2 mime type
AddType  font/woff2  .woff2

Browser Support

  • Google Chrome 36
  • Opera 23
  • Firefox 39
  • Opera 23
  • Edge 14
  • Safari 12

Helpful links

Powered by

Sergej Müller

@ElijahLynn
Copy link

How come the woff2 mimetype has not been registered with the IANA?

http://stackoverflow.com/questions/27829408/why-isnt-woff2-in-the-mimetype-directory

@richiebee
Copy link

use .ahtacess works for me

@zachleat
Copy link

zachleat commented Feb 6, 2015

Can you add a warning here about Data-URI embedding multiple file formats? It’s not a recommended practice, it negates the page weight benefits offered by WOFF2 if you include both Data URIs in a single file.

@wayann
Copy link

wayann commented Feb 16, 2015

@cvrebert
Copy link

Google uses font/woff2

Could you please point to a specific example of this?

Edit: To answer my own question: http://www.google.com/fonts/
And here's hoping they rectify that: https://twitter.com/cvrebert/status/570155277648924672

@jimmywarting
Copy link

http://onlinefontconverter.com has a online & a command tool to convert any font to woff2. You don't need to install any program. font-packs also works (you get one woff2 file for every font

@PhilAndrew
Copy link

Does it work in SVG?

@boblauer
Copy link

As someone who uses the Data-URI method, is there an option for loading the correct type from the server? As @zachleat said, it makes no sense to embed both in a single file.

@blaja
Copy link

blaja commented Jul 9, 2015

You can also add FF 39 stable to the list, it is enabled by default now, which is great.

@jungshik
Copy link

W3C now recommends font/woff and font/woff2 for WOFF and WOFF2. See
http://dev.w3.org/webfonts/WOFF2/spec/#IMT

@nfroidure
Copy link

Hi guys. Made a NodeJS wrapper for the Google lib, thought you could be interested in adding it to this document: https://github.com/nfroidure/ttf2woff2

@jimmylee
Copy link

Is there a way to convert WOFF 2.0 to WOFF 1.0?

@tomByrer
Copy link

@Haroenv
Copy link

Haroenv commented Aug 13, 2016

Safari 10 should have support for it too.

@anthony-geoghegan
Copy link

@jungshik is right. The W3C now recommend using font/woff2 as the MIME type: https://www.w3.org/TR/WOFF2/#IMT

@lazylester
Copy link

@anthony-geoghegan how can one figure out whether apache is using the W3C/IANA mime type (font/woff2) or the previous mime type (application/font-woff2)?

@angristan
Copy link

@lazylester do a curl -I http://url/font.woff2 and check the Content Type header

@orynider
Copy link

@eladkarako Why you do not make an .7z for win32 as this one: https://github.com/aj-ash/woff2/releases ?

@3xploiton3
Copy link

how to view woff2 in windows 11?

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