Zach’s ugly mug (his face) Zach Leatherman

Randsom: A Random Web Fonts Ransom Note

April 02, 2017 On Twitter (archived)

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

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


< Newer
Selecthor: A Better way to Learn and Demo CSS Selectors
Older >
Bernie Tweets

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

3 Likes

Andrew DouglassKeith J GrantAlexandru Pavaloi
1 Comment
  1. Alexandru Pavaloi

    Wow, it is what I'm looking for. Thanks a lot!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)