zachleat’s Ugly Mug

Zach Leatherman

Randsom: A Random Web Fonts Ransom Note

02 April 2017 Read this in about 2 minutes.

This quote from Sarah Drasner (@sarah_edo) floated into my stream.

I thought, wait—I would want to do that! Let’s build it!

  • But instead of 30 web fonts, let’s use 100.
  • And we’ll load them in a random order.
  • And we’ll get rid of the FOIT for each one.
  • And we’ll subset them so that our 100 web fonts only add up to ~100KB total weight.
  • And we’ll use vmax (the larger of 1vw or 1vh) with font-size so the text scales with the viewport.

Screenshot of Randsom

Read the Randsom Note (Demo)

Randsom has a white list of script-style typefaces gathered from the Google Web Fonts service. For each character in the sample text, we take a random typeface and load a web font containing only that character in the content. Each web font is approximately 1KB (on average).

We use the CSS Font Loading API to prevent FOIT using the FOUT with a Class method. After a web font has loaded and displayed for a second, the process is repeated with a new typeface from the list. When all 100 web fonts have been used, no further action is taken on the page.

Interestingly, originally the script was intended to re-use web fonts from the list, loading different characters with a new request every time in an infinite loop. This probably could have been achieved using unicode-range on the Google Web Fonts @font-face block and in the CSS Font Loading API, coupled with a unique class in the FOUT with a Class font loading method. However—I didn’t take this experiment that far. It simply quits when all the fonts have been used, which seems like a safer method anyway considering an infinite loop could be characterized as a Google Web Fonts DDoS.

With thanks to

Retweet to share this post