Zach’s ugly mug (his face) Zach Leatherman

Trying out a new Font Stack

April 01, 2016

Update: This was an April Fools’ Joke. While it was originally implemented site-wide, moving forward I’ve removed the code. Don’t use this font loading strategy. Feel free to use Comic Neue though, it seems solid.

I’ve decided to move away from my old, trusty, font stack foundation of Lato and try out a new font loading strategy with a new font stack. A few details:

  1. I’ve purposefully disabled the sessionStorage trick that optimized font loading for repeat views. This should ensure that every visitor receives a Flash of Unstyled Text, or FOUT.
  2. I’ve purposefully set a minimum FOUT delay of 3 seconds, to ensure that the FOUT is highly visible. Even if the font request finishes before 3 seconds have passed, the script will wait until the 3 second delay has completed to render the web font. This is a new strategy I’m calling 3G for Everyone.
  3. The new system font stack is now: Comic Sans MS, Chalkboard SE, sans-serif (see full support on fontfamily.io). Chalkboard SE was included to add support for iOS.
  4. The new webfont typeface is Comic Neue, a lovely open licensed (SIL) alternative to Comic Sans developed by Craig Rozynski.
  5. I’m not using the latest and greatest font loading technique (which, in my opinion, is a combination of Critical Web Fonts and Data URIs). Instead I am using the FOFT technique. They’re all pretty similar to set up but the benefit to using the newest technique is that it all but eliminates FOUT (which is amazing). Given the first two points above, that is not the sort of beautiful user experience we want here.

As you can clearly see, this technique pairs the great typography of system fonts with the beauty and control of web fonts. Hope you enjoyed it!


< Newer
The Web Fonts: Preloaded
Older >
Web Font Anti-pattern: Data URIs

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 »

1 Comment
  1. hotJS Disqus

    01 Apr 2016
    Get the latest and best resources about web developmenthttps://www.hotjs.net
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)