Reduce size of webfont payload

[msmorgan]

This brings down the size of the fonts dramatically by using woff and woff2 and splitting the fonts into Unicode subranges. The full font payload on the home page goes from approximately 3MB to less than 90kB.

The fonts.css stylesheet is now generated by the SASS compiler on app launch.

[msmorgan]

Found a typo, fixing.

[msmorgan]

Typo fixed. I had accidentally removed the font-display: block; declarations, but those are back now.

[ashleygwilliams]

@chriskrycho since you are who added this - could you take a look? thanks!

[chriskrycho]

Ah, very nice – thank you for this pr, @msmorgan! I'm a big fan of going to woff/woff2 wherever possible.

A couple notes:

• We definitely don't need anything but woff and woff2 – even IE9 had woff support! – so we should drop the .eot files
• The character subsetting could in principle reduce the size loaded as well… if we split the font files apart. My guess is that Google Fonts was smart enough to be doing that; we definitely aren't doing anything that fancy, so I'm good with removing those here.
• While we're at it, we should replace the existing .ttf files with .woff and .woff2 files.

[msmorgan]

@chriskrycho I copied the faces and styles directly from the Fira repository. It was last updated 3 years ago, and I suppose it was best practice at that time to use eot fonts. I'll go ahead and remove the eot fonts, as well as the ttf fonts for Fira Sans.

I looked online and could not find a woff or woff2 version of Alfa Slab One. I found some online conversion tools, but I'm not sure if the license of Alfa Slab One allows the conversion.

[msmorgan]

I found a tool (font-ranger) capable of splitting the fonts into separate versions for different Unicode ranges. I ran that on all the fonts, which had the side effect of converting Alfa Slab One to woff and woff2. I generated a new version of fonts.css using sass.

[chriskrycho]

Outstanding! I will re-review in a bit and test locally as well, but thank you so much for doing that!

[msmorgan]

I think I'm done fiddling with this now. On the homepage the font payload is now less than 90kB.

[chriskrycho]

That is fantastic! Thank you so much for pushing that down so far. I will test and this should be merged tomorrow!

[msmorgan]

@chriskrycho If you'd like, I can squash the first few commits so the unused fonts don't end up in the version history.

[chriskrycho]

That would be great – a nice bit of savings of download bandwidth in its own way!

[msmorgan]

@chriskrycho I've cleaned up the commit history. This should be ready to merge.

[chriskrycho]

Perfect! I'll verify/test myself and merge by the end of the day! Thank you again; this is really outstanding.

[chriskrycho]

Thanks again! Merged!