Awesome post. I worked with cloud.typography for a client once too, and was surprised to discover that they shipped two base64-encoded data strings for each font, each one containing only one half of the font's glyphs – that is to say, their CSS had two @font-face rules for each font: one that had the data for e.g. A-M, and the other that had data for N-Z. The `font-family` rules of the body text specified both FontA and FontB, leaving the browser to piece the font together. Of course, this made extra bloat in the base64 string, because it's essentially two encoded font files instead of one.<p>I assumed this was for anti-DRM / licensing purposes, so that if someone tried to download the font shipped to the client, they wouldn't get the whole alphabet (even though it's fairly trivial to stitch fonts together – you can use FontForge to copy/paste glyphs from one font to another). Do you know if they still ship fonts with a split alphabet?
That trick of marking a stylesheet for print media use only, and setting it for use with all media only after it is fully loaded, is very clever. Worth the read for that little gem alone.
Great write-up on this topic. in the demo video near the bottom can you make the links to those each available. I tried to go to <a href="https://csswizardry.dev/typography.com/fixed.html" rel="nofollow">https://csswizardry.dev/typography.com/fixed.html</a> and am getting a page that says "sneaky" I was hoping to run these demos locally to really see the magic firsthand.
I love harrys posts, you can tell he really knows this stuff inside and out (plus we share an uncommon name). That font pop-in does such suck and I can see some execs agreeing that the extra time is worth the cost. I agree that the initial rendering being faster would be much nicer.
Side note: This was really hard to read for me. The font was way too thin. Any vertical lines get smeared across three horizontal pixels (I assume because of subpixel AA) making everything thin and hard to parse. This is the second or third site I've seen this happen on, I wish I knew why.