https://takao.blog/en/tags/fonts/Recent content in Fonts on Commentary of TakaoHugo -- gohugo.ioenCommentary of TakaoSat, 13 Jun 2026 23:11:50 +0900https://takao.blog/en/web/performance-fonts-loading-optimization/Sun, 15 Mar 2026 00:00:00 +0900https://takao.blog/en/web/performance-fonts-loading-optimization/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post Optimizing Web Font Loading: Preventing FOUT and FOIT" /><h2 id="introduction">Introduction </h2><p>Web fonts enhance design but come at a cost. While a custom font loads, browsers must decide: show invisible text (<strong>FOIT</strong> — Flash of Invisible Text) or show a fallback font (<strong>FOUT</strong> — Flash of Unstyled Text). Either choice impacts <strong>CLS (Cumulative Layout Shift)</strong> and user experience. This article covers strategies to load fonts reliably while minimizing layout shifts.</p> <hr> <h2 id="the-font-display-descriptor">The font-display Descriptor </h2><p>The <code>font-display</code> property in <code>@font-face</code> controls how a font is displayed during loading:</p>