If the web font isn’t available then, we fall back to the fallback font, but the next page navigation (or a reload of this page) will use the font - as it should have finished downloading by then. With this option, we avoid both FOIT and FOUT by basically only using fonts that have already been downloaded. This option basically makes web fonts optional, or to put differently, if the font isn’t there by the time the page needs it, then it’s up to the browser to never swap it. The other option is to use font-display: optional. Using font-display: optional Can Solve FOIT And FOUT - At A Cost To me, the “block period” of swap was too short and I’d honestly prefer to wait a tiny bit longer to get the initial render correct. I’ve also optimized by font-loading by preloading fonts that I’ve made as small as possible by self-hosting subsetted fonts - so visitors often saw the fallback fonts for only a small period of time. While it’s true that block won’t stop shifts (the font is still rendered in invisible text), it at least makes them less noticeable to the user. I’ve reverted back to font-display: block on sites I look after as I really do find the text shift quite jarring and annoying. In this age of Core Web Vitals and Cumulative Layout Shifts being (quite rightly!) recognized as detrimental to users, font-display: swap is a poor choice because of that. The fonts are very different sizes and, because of this, the screen content shifts around. But we also see there is quite some difference in the text layout with the two fonts. Now, when put side by side, the web fonts are considerably nicer and do fit with the Smashing Magazine brand. Smashing Magazine, like most publishers, makes use of web fonts and the below screenshot shows the difference between the initial render (with the fallback fonts), and the final render (with the web fonts): Smashing Magazine article with fallback font and with full web fonts. I was supportive of this back then too, but am increasingly finding myself frustrated by the “hydration effect” when the web font downloads and characters expand (or contract) due to differences between the fonts. The thinking here was that it was better for performance to display the text as quickly as you can, even if it’s in the fallback font, and then to swap the font in when it finally downloads. However, beyond that it didn’t really solve the problem.Ī number of sites moved to font-display: swap when this first came out, and Google Fonts even made it the default in 2019. The font-display property for gave that choice to the web developer whereas previously the browser decided that (IE and Edge favored FOUT in the past, whereas the other browsers favored FOIT). Wasn’t font-display Supposed To Solve This? Neither option has really “won out” because neither is really satisfactory, to be honest. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) where the text is hidden until the font downloads or Flash of Unstyled Text (FOUT) where you use the fallback system font initially and then upgrade it to the web font when it downloads. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.įont loading has long been a bugbear of web performance, and there really are no good choices here.
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that.