Randsom: A Random Web Fonts Ransom Note
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
font-sizeso the text scales with the viewport.
➡ 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
- Google Web Fonts and especially their
textquery 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