This is a 2026 update of a 2011 article about writing a tiny zero-width font for doing webfont load detection for drawing text on a canvas element, as the browser landscape, as well as font support, has changed radically in the last fifteen years. IE no longer exists, Opera is just another Chrome, Safari fixed most of the bugs that broke this approach some fifteen years ago, and pretty much everything's using OTS for font sanitization and Harfbuzz for shaping.
In the article we'll run through the byte layout of an OpenType 1.9 font, using TTF vector tables for our glyph outlines (which will contain exactly zero outlines!) and figure out which values we can just rip out, and which ones we can at least null out to make a font that's as small and as compressible as possible, leading to a 520 byte (100% spec compliant!) font file with a Base 64 string that we can pack in 298 bytes of JS for embedding directly on a web page.
"Why would we still need this in 2026??" To be clear: you probably don't. But that's not the fun part. The fun part is to see how far off the beaten path we can get in terms of creating a spec-compliant font that goes about as hard as possible in the opposite direction of what the spec designers had in mind.
This is a 2026 update of a 2011 article about writing a tiny zero-width font for doing webfont load detection for drawing text on a canvas element, as the browser landscape, as well as font support, has changed radically in the last fifteen years. IE no longer exists, Opera is just another Chrome, Safari fixed most of the bugs that broke this approach some fifteen years ago, and pretty much everything's using OTS for font sanitization and Harfbuzz for shaping.
In the article we'll run through the byte layout of an OpenType 1.9 font, using TTF vector tables for our glyph outlines (which will contain exactly zero outlines!) and figure out which values we can just rip out, and which ones we can at least null out to make a font that's as small and as compressible as possible, leading to a 520 byte (100% spec compliant!) font file with a Base 64 string that we can pack in 298 bytes of JS for embedding directly on a web page.
"Why would we still need this in 2026??" To be clear: you probably don't. But that's not the fun part. The fun part is to see how far off the beaten path we can get in terms of creating a spec-compliant font that goes about as hard as possible in the opposite direction of what the spec designers had in mind.