【導入パターン比較】

方法 実務使用率 手軽さ 表示速度 CLS対策 WordPress相性 向いてる場面
① Google Fonts（CDN）+ &display=swap ◎（定番） ◎（URL貼るだけ） ◯ ◯（swap必須） ◎ すぐに試したい／学習中／軽い案件
② Google Fonts 自ホスト＋@font-face + swap ◯（本番多い） ◯ ◎（CDN不要） ◎ ◎ 本番・LP・SEO改善を狙うとき
③ Adobe Fonts（Typekit） △ ◯ △ △（swap不可） ◯（プラグインあり） ブランド重視・商用案件
④ 自作 @font-face（完全ローカル） △ △ ◎（条件次第） ◎ ◯ 多言語／特殊書体／細かい制御が必要な時

【ポイント：font-display: swap の有無でUXが変わる】

状況 挙動 UX CLS（ズレ）
swap あり すぐ代替フォントで表示 → 後から本フォントに切替 ◎ ◎
swap なし（auto） 数秒間文字が表示されない → 後から突然出現 ❌ ❌

【Google Fonts CDNを使う場合】

html
コピーする編集する
<link href="<https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap>" rel="stylesheet">

【Google Fonts 自ホスト型】

  1. .woff2 ファイルをダウンロード（Google Fonts Helperなど）
  2. /fonts/ に設置
  3. SCSSまたはCSSに以下を記述：
scss
コピーする編集する
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP.woff2") format("woff2");
  font-display: swap;
}