脱・CDN：「Google Fontsをそのまま貼るだけ」を卒業しよう
脱・CDN：「Google Fontsをそのまま貼るだけ」を卒業しよう
Google Fontsは非常に便利ですが、実はフロントエンドのパフォーマンス最適化においては「伸びしろ」の宝庫です。
- 接続コスト： 外部ドメインへ接続するためのタイムラグ（DNS解決やSSLハンドシェイク）が発生する。
- 制御不能： フォントの読み込み順序やキャッシュ戦略を、ブラウザの挙動に委ねることになる。
「なんとなくCDN」を卒業し、フォントファイルを自分の管理下に置くことで、真の高速化が始まります。
賢く軽量化：不要なウェイトを削るだけで数MB単位の削減
日本語フォントが重い最大の理由は、その膨大な文字数とウェイト（太さ）の種類です。
例えば、定番の Noto Sans JP。公式サイトからフルセットをダウンロードすると、そのサイズは 50MB以上 にもなります。これをそのままWebで読み込ませるのは、ユーザーへの「データ通信量の暴力」と言っても過言ではありません。
ツールで「必要な分だけ」に絞る
サブセット化（文字の抽出）までせずとも、「使うウェイト（太さ）だけ」に絞るだけで劇的に軽くなります。
- おすすめツールgoogle-webfonts-helper
このツールを使えば、Google Fontsから「Web配信に最適なWOFF2形式」かつ「必要なウェイトだけ」をまとめてダウンロードできます。
このツールを使い、実際に実務でよく使う 400, 500, 600, 700 のウェイトに絞ってダウンロードしたところ、サイズは 4.1MB まで一気に削減されました。
究極の最適化：WOFF2 × font-display × preload
ファイルを整理したら、次は「ブラウザへの届け方」を最適化します。
① 次世代形式 WOFF2 への一本化
圧縮率が極めて高い WOFF2 形式を採用します。モダンブラウザのみをターゲットとするなら、もはやこれ一択でOKです。
② font-display: swap で表示遅延を防ぐ
「フォントが届くまで文字を表示しない（FOIT）」を回避します。CSSの @font-face にこの1行を加えるだけで、ダウンロード中はシステムフォントが表示され、ユーザーに「コンテンツがそこにある」ことを即座に伝えます。
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/noto-sans-v30-japanese-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* これが必須！ */
}③ link rel=”preload”で読み込みの優先順位を上げる
ブラウザがCSSを解析してからフォントを探しに行くのを待つのではなく、HTMLの早い段階で「このフォント、すぐ使うから先に準備しておいて！」と伝えます。
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>結果：PageSpeed Insightsの「あの警告」が消える
これらの最適化を施すことで、LighthouseやPageSpeed Insightsのスコアは目に見えて改善します。
- LCP (Largest Contentful Paint): テキストの描画が早まり、最大コンテンツの表示速度が向上。
- CLS (Cumulative Layout Shift): フォントの読み込み待ちによるレイアウトのガタつきを抑制。
- レンダリングブロックの解消: 外部へのリクエストチェーンが短縮され、表示までの「詰まり」が解消。
【コラム】Google Fontsのまま「必要な文字だけ」に絞り込む方法
ローカル配信への切り替えが難しい場合でも、Google FontsにはURL上でサブセット化を指定できる機能があります。
例えば、ロゴだけに特殊なフォントを使いたい場合、全文字を読み込むのは無駄です。text= パラメータを使えば、指定した文字だけの軽量なフォントファイルを動的に生成できます。
HTMLの記述例
<link href="https://fonts.googleapis.com/css2?family=Roboto&text=Kanaete" rel="stylesheet">特定のフレーズにしか使わないフォントであれば、これだけで劇的にファイルサイズを軽量化できます。
まとめ：地味な作業が、最高のUXを作る
「ローカル配信への切り替え」や「WOFF2の採用」の実装自体は、決して複雑なものではありません。しかし、多くの現場では「CDNの方が手軽だから」という理由で見過ごされがちなポイントでもあります。
私たちがなぜ、これほどまでに「フォント」という一見地味なリソースにこだわるのか。
それは、「速さ」こそが最高のユーザー体験（UX）に直結するからです。
特に日本語フォントは、欧米の言語に比べてリソースが極めて巨大です。この「重い壁」を技術で取り除き、ユーザーの待ち時間を削ることは、デザインを磨くことと同等、あるいはそれ以上に重要な「ホスピタリティ」であると私たちは考えています。
明日からの開発で、ぜひプロジェクトに「フォントの特急券（preload）」を導入してみてください。その数ミリ秒の短縮の積み重ねが、誰かの「心地よい閲覧体験」を支える確かな力になるはずです。
