Fonts on たかおの解説https://takao.blog/ja/tags/fonts/Recent content in Fonts on たかおの解説Hugo -- gohugo.iojaたかおの解説Sat, 13 Jun 2026 23:11:50 +0900Webフォントのロード最適化：FOUTを防ぎレイアウトずれを解消するhttps://takao.blog/ja/web/performance-fonts-loading-optimization/Sun, 15 Mar 2026 00:00:00 +0900https://takao.blog/ja/web/performance-fonts-loading-optimization/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post Webフォントのロード最適化：FOUTを防ぎレイアウトずれを解消する" /><h2 id="はじめに">はじめに </h2><p>Webフォントはデザインを向上させますが、読み込み中に<strong>FOIT（Flash of Invisible Text）</strong> や<strong>FOUT（Flash of Unstyled Text）</strong> といった問題を引き起こします。またフォントの入れ替わりによる**CLS（Cumulative Layout Shift）**も大きな課題です。本記事では、レイアウトシフトを最小限に抑えながらフォントを最適に読み込む方法を解説します。</p>