One of the major concerns with loading web fonts using the @font-face rule is the increased load time. With the increased load time, the text to which the font has been applied takes longer than usual to appear on the page — that’s not good for the User Experience.

We don’t want our users to wait for the content considering the fact that is already available but just isn't visible to their eyes. The modern browsers come with a mechanism called “Flash of Invisible Text” or “FOIT ”. Chrome and Firefox render invisible text for 3-seconds, if the font is still not available, they use system font as a fallback and swap once the web font is ready. The problem is more severe in Microsoft Edge and Safari browsers, the former uses a system font as a fallback and the latter waits until the font is ready with no fallback as an option. With that, the time required for the First Contentful Paint takes a toll.

This can be very useful for demographics with slower internet connections, especially on mobile devices.

Below is a demo page with FOIT in action as observed in the second frame where the text is completely invisible. Also, notice the metrics. It takes 1.7s to achieve the First Contentful Paint.

The metrics and the impact of FOIT can be severe on a complex webpage or an application.

Thankfully, there is a very simple fix to overcome this issue. And it can be achieved by just adding a few lines of code to your CSS. We now apply a technique called “Flash of Unformatted Text” or simply, “FOUT” to mitigate this issue. This allows us to display the text the moment it is ready in the DOM with a system-native font as a fallback before the custom font is loaded.