18th February 2020 at 09:47

This Google Fonts subsetting thing is cool. Append your url with &text= with the characters you want.

Tests:

  1. With subsetting (~21k): https://cdpn.io/andybelldesign/debug/95773da82c7eaf769a6a9fb86c563c9d
  2. Without subsetting (~11k): https://cdpn.io/andybelldesign/debug/b993258f2a59ce956eae99d94fe48ab5

I only use Playfair for headings on the new piccalilli site and I’ll still serve the font locally, but generating it like this is hella useful.

Nice work, fonts team!

On the WIP piccalilli site with Playfair Display (900) and Courier Prime (400):

  1. Before subsetting: 55kb
  2. After subsetting: 17kb

Fonts served locally still, but generated with Google Fonts instead of Font Squirrel.

I could almost fit one React in that space.

👋 Hello, I’m Andy and this is my little home on the web.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone and Piccalilli, a publication that will level you up as a front-end developer.

Back to blog