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
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.
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!
@font-face {
font-family: MyFont;
src:
url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
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');
}
- 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):
types {
application/font-woff2 woff2;
}
AddType application/font-woff2 .woff2
- Google Chrome 36
- Opera 23