Subsetting a variable font by unicode range

Two WOFF2 files cover Latin and Latin Extended, each declared with its own unicode-range, so a page that only uses ASCII downloads one of them. How the split is chosen and what it does to the first paint.

A variable font is a wonderful thing to ship once and a terrible thing to ship whole. The Latin block that covers English, Spanish and the punctuation a page actually uses is a fraction of the full file, so the face is split by unicode-range and the browser fetches only the ranges the text on screen needs.

The split is declared with two @font-face rules sharing one family name. Nothing in the markup changes, and a page that renders a single accented character outside the first range pulls the second file lazily instead of blocking on it.

All posts