https://daitai.dev/tags/google-fonts/Recent content in Google Fonts on 大体動かないHugojaSat, 11 Apr 2026 22:40:21 +0900https://daitai.dev/posts/google-fonts-lcp/Sat, 11 Apr 2026 22:40:21 +0900https://daitai.dev/posts/google-fonts-lcp/<p>このブログの Cloudflare Web Analytics を眺めていたら、LCP（Largest Contentful Paint）の評価がなかなかひどいことになっていた。</p> <p><img src="https://daitai.dev/posts/google-fonts-lcp/cloudflare-webanalytics-lcp.png" alt="Cloudflare Web Analytics の Core Web Vitals。LCP が Good 0%、Needs Improvement 50%、Poor 50%"></p> <p>体感では全然遅くないんだけどなぁ、と思いつつ、Claude さんに原因を調べてもらった。</p> <h2 id="結論google-fonts">結論：Google Fonts</h2> <p>Claude さん、さすがに早い。表題の通りの結論でした。</p> <p>どうやら、デザインで使っていた、<code>M+PLUS+Rounded+1c</code> という日本語の丸ゴシックフォントが犯人。</p> <p>グリフ数が数万文字規模になるので、ファイルサイズが英字フォントとは桁違いに重いとのこと。</p> <p>詳しく説明してもらいました。</p> <blockquote> <p>Hugo の設定を見たら、こういう記述があった。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">googleFontsLink</span> <span class="p">=</span> <span class="s2">&#34;https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap&#34;</span> </span></span></code></pre></div><p>しかも外部 CDN（fonts.googleapis.com）へのリクエストが発生するので：</p> <ol> <li>DNS 解決</li> <li>TCP 接続</li> <li>TLS ハンドシェイク</li> <li>フォント CSS の取得</li> <li>実際のフォントファイルの取得</li> </ol> <p>という連鎖が初回訪問のクリティカルパスに入ってくる。LCP がテキスト要素（見出し）だったとすれば、フォントが読み込まれるまでレンダリングがブロックされる。</p> </blockquote> <h2 id="体感と計測がズレる理由">体感と計測がズレる理由</h2> <p>キャッシュだよ、キャッシュ。</p> <p>Claude さんに言われて気づいたわ。</p> <p>自分のブラウザに既にあるんだもん、そりゃ速いはずだよ。</p> <p>Cloudflare Web Analytics は実際の訪問者のブラウザで計測した RUM（Real User Monitoring）データを集めている。</p> <p>訪問者のほとんどは初回訪問でキャッシュなし。</p> <p>見た人は、「おっそ！」って思ってたことでしょう。</p> <p>ほんとすみません。</p> <h2 id="システムフォントに切り替えた">システムフォントに切り替えた</h2> <p>ということで、Google Fonts をやめてシステムフォントに切り替えました。「丸みがあれば何でもいい」という半ば投げやりな姿勢で選んでもらった。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="s2">&#34;Hiragino Maru Gothic ProN&#34;</span><span class="o">,</span> <span class="s2">&#34;Hiragino Maru Gothic Pro&#34;</span><span class="o">,</span> <span class="s2">&#34;BIZ UDPGothic&#34;</span><span class="o">,</span> <span class="s2">&#34;Noto Sans JP&#34;</span><span class="o">,</span> <span class="nt">sans-serif</span> </span></span></code></pre></div><table> <thead> <tr> <th>OS</th> <th>使われるフォント</th> </tr> </thead> <tbody> <tr> <td>macOS / iOS</td> <td>ヒラギノ丸ゴ ProN（丸みは M PLUS とほぼ同等）</td> </tr> <tr> <td>Windows 10/11</td> <td>BIZ UDPGothic（UD 系、やや丸み）</td> </tr> <tr> <td>Android / Linux</td> <td>Noto Sans JP</td> </tr> </tbody> </table> <p>コードブロックの <code>JetBrains Mono</code> も同様にシステムフォントへ：</p>