CreaTools LogoCreaTools
Tech Notes
Font Preview

Google Fontsの読み込み方法｜実務での割り切りポイント

2025-11-10

:::note ※Google Fontsの読み込みを最適化したい人向けの「実装ガイド」記事です :::

結論（私の判断基準）

  • 基本形：link タグ + preconnect
  • @import は避ける：CSSパース完了までブロックされる
  • ウェイトは2種類に絞る：400 と 700 で十分なことが大半

💡 フォントを選んでから最適化したい → Font Preview で見た目を確認

私の実装パターン（これをコピペしてる）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

preconnect を付けることで DNS解決・TLS接続を事前に行い、高速化できる。

毎回これを書いている。変えるのはフォント名とウェイトだけ。

読み込み方法の比較

方法並列読み込みブロッキング私の判断
link タグ○なしこれを使う
@import×CSSパース完了まで使わない
JavaScript API○なし動的用途のみ

@import を使わない理由

/* ❌ これは遅い */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

CSS のパース完了までフォント読み込みがブロックされる。link タグより確実に遅い。

特別な理由がない限り @import は使わない。

font-display の選択

値FOUTFOIT私の使い方
swapありなし本文はこれ
optionalなしなし見出し・装飾
fallback短い短い使ったことない
  • FOUT: Flash of Unstyled Text（フォント切り替え時のチラつき）
  • FOIT: Flash of Invisible Text（フォント読み込み中にテキストが見えない）

**私は swap 一択。**ユーザーがテキストを読めない時間を最小限にしたい。チラつきは許容する。

軽量化テクニック

テクニック1：ウェイトを絞る

<!-- ❌ 全ウェイト（数MB） -->
<link href="...?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- ✅ 必要なウェイトだけ（軽い） -->
<link href="...?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

多くの場合、400 と 700 の2つで十分。

テクニック2：サブセット化（限定的に使う）

<link href="...?family=Noto+Sans+JP&text=あいうえお" rel="stylesheet">

使用する文字を限定すると軽くなる。ロゴやキャッチコピー向け。

**本文には使わない。**どの文字が出てくるか分からないから。

Next.js での最適化

Next.js 13以降は next/font で自動最適化される。

import { Noto_Sans_JP } from 'next/font/google';

const notoSansJP = Noto_Sans_JP({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
});

export default function Layout({ children }) {
  return (
    <body className={notoSansJP.className}>
      {children}
    </body>
  );
}

メリット：

  • ビルド時にフォントをダウンロード
  • セルフホスティングで外部リクエスト不要
  • CLS（レイアウトシフト）の自動対策

Next.js を使っているなら、これ一択。

実務での割り切りポイント

悩み私の割り切り
全ウェイト欲しい400/700 で我慢する。3種類以上は本当に必要か疑う
チラつきが気になるswap で許容する。FOIT より FOUT の方がマシ
速度を追求したいシステムフォントに切り替える選択肢も検討
サブセット化すべきか本文には使わない。ロゴだけ

迷ったときの判断

迷い私の判断
どの読み込み方法link タグ + preconnect
font-displayswap
ウェイトの数400/700 の2種類
Next.js 使ってるnext/font 一択

この記事で解決しない場合

Google Fontsは便利だが、読み込めないこともある。フォールバックを書いて、swap を指定して、それで終わり。