{"id":199400,"date":"2015-04-01T07:27:21","date_gmt":"2015-04-01T14:27:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=199400"},"modified":"2015-04-01T07:40:45","modified_gmt":"2015-04-01T14:40:45","slug":"fout-foit-foft","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fout-foit-foft\/","title":{"rendered":"FOUT, FOIT, FOFT"},"content":{"rendered":"
Remember FOUT<\/a>? When using a custom font via @font-face<\/a>, browsers used to display a fallback font in the font stack<\/a> until the custom one loaded. This created a “Flash of Unstyled Text”<\/strong> — which was unsettling and could cause layout shifts. We worked on techniques for fighting it, for instance, making the text invisible until the font was ready<\/a>.<\/p>\n A number of years ago, browsers started to shift their handling of this. They started to detect if text was set in a custom font that hasn’t loaded yet, and made it invisible until the font did load (or X seconds had passed). That’s FOIT: “Flash of Invisible Text”<\/strong>. Should a font asset fail or take a long time, those X seconds are too long for people rightfully concerned about render time performance. At worst, this behavior can lead to permanently invisible content. <\/p>\n These days we’re trying to fight against FOIT in various ways. In Faster Font Loading with Font Events<\/a>, Jonathan Suh suggests using a library<\/a> to detect if a custom font has loaded, and only then change a class name on the document to set the text in that font. This makes the behavior like FOUT – speeding up readable content at the cost of somewhat jarring visual changes.<\/p>\n Zach Leatherman has been writing a lot about this too. In Better @font-face with Font Load Events<\/a> he also suggests waiting for the font to be loaded before setting a class to set the type. He also goes into what it takes to trigger a font download (it’s not as simple as a @font-face<\/code> declaration). Scott Jehl corroborates this in Font Loading Revisited with Font Events<\/a>, including a bit about cookies and caching.<\/p>\n