How to WOFF or Converting Fonts for Use on the Web

Font Compression

I have been going a bit mental 😵 in regards to fonts recently, and I think web-fonts or font compression for use on the web is essential for anyone serious about web development.

Special thanks to Diomari Madulara 🙇 for the image.

WOFF2

WOFF2 or Web Open Font Format 2 is the second iteration of the web-font format. The WOFF formats compress your desired TTF and OTF fonts to be efficiently used on the web.

WOFF vs WOFF2

  • WOFF uses zlib for compression while WOFF2 uses Brotli for compression.
  • WOFF grants a >40% reduction to file size vs traditional TTF while WOFF2 grants a >30% reduction to file size vs WOFF.

Support:

WOFF ⮧

  • Firefox >= 3.6
  • Chrome >= 6.0
  • Internet Explorer >= 9
  • Edge
  • Opera >= 11.10
  • Safari >= 5.1

WOFF2 ⮧

  • Firefox >= 35
  • Chrome >= 36
  • Internet Explorer >= 9
  • Edge >= 14
  • Opera >= 26
  • Safari >= 10

Compress to WOFF2

Grab the source from here and install it. Note that compilation requires GCC. Afterwards, you get two command woff2_compress and woff2_decompress. Both commands take one argument each; use woff2_compress to compress a TTF or OTF file to WOFF2 or use woff2_decompress to decompress a WOFF2file to its original format (OTF/TTF).

woff2_compress font.otf
woff2_decompress font.woff2

And there you have it. Simple and effective. Happy coding! 🙌🎉