Me, I really dislike FOUT. I like that it’s an option, because not displaying text quickly on the web is no good. I know
font-display: swap; is popular because it’s good for performance, but that FOUT stuff pains me. Matt Hobbs:
If there’s one thing I’d like readers to take away from this post it’s that
font-display: swapis a very good option for users with a fast internet connection. But its infinite swap period could be frustrating for users on very slow and unstable connections. If you have users viewing your site under these conditions (I’m pretty certain you will at some point in time), then it may be worth considering
font-display: fallbackor even
Seeeee, I told ya. I like how
font-display: optional; totally stops FOUT. The font is either applied super fast, or isn’t used at all (but still downloaded async). Chances are, on the next page load, the font is loaded and cached and will be used.
Note this is about slow connections, not necessarily connections where the user would prefer as little data usage as possible. If that’s the case, check out some of the recent posts we linked up in Responsible, Conditional Loading.
And boy howdy, the Web Performance Calendar this year was just loaded in great articles.
You can support CSS-Tricks by being an MVP Supporter.