Trying out a new Font Stack

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Update: This was an April Fools’ Joke. While it was originally implemented site-wide, moving forward I’ve kept the code for this approach quarantined to this page. 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!

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Print Share Comment Cite Upload Translate Updates

APA

Zach Leatherman | Sciencx (2016-04-01T05:00:00+00:00) Trying out a new Font Stack. Retrieved from https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/

MLA

" » Trying out a new Font Stack." Zach Leatherman | Sciencx - Friday April 1, 2016, https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/

HARVARD

Zach Leatherman | Sciencx Friday April 1, 2016 » Trying out a new Font Stack., viewed ,<https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/>

VANCOUVER

Zach Leatherman | Sciencx - » Trying out a new Font Stack. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/

CHICAGO

" » Trying out a new Font Stack." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/

IEEE

" » Trying out a new Font Stack." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/. [Accessed: ]

rf:citation

» Trying out a new Font Stack | Zach Leatherman | Sciencx | https://www.scien.cx/2016/04/01/trying-out-a-new-font-stack/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.