Randsom: A Random Web Fonts Ransom Note

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

“We wouldn’t want to use 30 different fonts and make it look like a ransom note,” — @sarah_edo #SassSummit

— E4H (@e4h) December 14, 2016

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.

Read the Randsom Note

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

• Google Web Fonts and especially their text query parameter to subset the web fonts.
• Filament Group’s loadCSS to asynchronously load the stylesheets from Google Web Fonts. The web fonts are loaded asynchronously using the CSS Font Loading API. So if you’re wondering why this looks totally bland in Microsoft Edge—Edge doesn’t support the CSS Font Loading API.
• Charming.js, a no-dependency implementation of Lettering.js