Web Font Loading: Strategies That Reduce Wait Time
Font loading does not have to mean a blank screen or a jarring swap. Here are the strategies I use to keep text visible and fast. Web font loading is one of those topics where the theory is simple and the practice is full of edge cases. The browser needs to download a CSS file, parse it, discover the font file URLs inside it, download those files, and only then render text in the chosen typeface. Every step in that chain adds latency, and the default behavior of most browsers is to hide text for up to three seconds while waiting for the font. That three-second window is where most of the perceived slowness comes from, and it is also where the biggest improvements are available. Understand the Default Behavior First Before optimizing anything, I always confirm what the browser does by default. Modern browsers use a blocking period of about three seconds during which text is invisible if a font is loading. After that period, the browser shows a fallback font and swaps to the web font when it arrives. This means that on a slow connection, users can stare at a blank space for three seconds before seeing any text at all. The fix is rarely to remove web fonts entirely, but to control that blocking period explicitly. The font-display property is the primary tool for this control.