Developer Blog

← Home

Using WOFF 2.0 Can Reduce Your Font Size By 30%

by Zac Colley

This is a pretty short post... So I spent most of the time drawing what WOFF 2.0 would be as a fuzzy monster:

A pink and blue blog with friendly eyes. They have stalky legs and big laced shoes.

What is WOFF?

WOFF stands for The Web Open Font Format. It's a modern font format. There are two versions: WOFF 1.0 and WOFF 2.0. WOFF 2.0 is compressed so there is less for our users to download.

The only downside we found is it's not supported in IE. It has support in Edge, Firefox, Chrome, Safari, Opera.

How Can I Implement WOFF 2.0?

You may want to go back and check where you downloaded your font from. They may have added a WOFF 2.0 file.

Otherwise you can use a tool like Font Squirrel to convert from pretty much any font file to WOFF 2.0.

It's best to have fallbacks in your CSS if you need to support browsers that don't support WOFF 2.0.

Here you can see an example of loading WOFF 2.0 and WOFF 1.0. What is nice about @font-face is in your CSS you say say which ones are available. Then your browser detects the best font to download and use.

@font-face {
	font-family: FontFamilyName;
	src:
		url('font.woff2') format('woff2'),
		url('font.woff') format('woff');
}

How Much Smaller is WOFF 2.0?

The Google Chrome Developers say "the new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).".

We managed reduce our font family from 104.7 KB to 70.4 KB. That's 34.3 KB savings, 32% of the original file size. Wow!