theasthai.org

Google Fontsの使い方

3 min read

要旨（Atomic）

  • 目的: WebでGoogle Fontsを安全かつ高速に読み込む最小手順。
  • 成果物: <link>/@import の使い分けと、font-family/font-weight の指定テンプレート。
  • 判断基準: 表示ブロックを避け、必要なウェイト・サブセットのみを取得する。

前提

  • プロジェクトで使用するフォント名・ウェイト（例: 400, 700）・文字サブセット（例: latin, japanese）を決める。
  • レンダリング遅延を避けるため display=swap を基本にする。
  1. Google Fonts でフォントを選択し、必要なスタイルだけに絞る。
  2. 生成される <link> を <head> に貼る。
<!-- 例: Noto Sans JP 400/700 を取得（表示遅延対策: display=swap） -->
<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"
>
  1. CSS で利用する。
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
}
h1, h2, h3 { font-weight: 700; }

代替（@import）

ビルド済みCSSにまとめたい場合のみ使用。初回描画が遅くなる傾向があるため <link> が基本。

/* main.css の先頭付近に配置 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

API のポイント（CSS2）

  • ウェイトの明示: wght@400;700 のように必要最小限だけ。
  • 表示戦略: display=swap でFOUT許容（CLS低減）。
  • サブセット: Latinのみなら &subset=latin を検討（配信サイズ削減）。

実践テンプレート

<!-- family は + でスペースを置換。複数フォントは &family= を繰り返す -->
<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=Inter:wght@400;600
  &family=Noto+Sans+JP:wght@400;700
  &display=swap" rel="stylesheet">
:root {
  --font-sans: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body { font-family: var(--font-sans); }

注意点

  • 不要なウェイト/スタイルは外す（配信CSSの縮小）。
  • preconnect を併用しTTFBを短縮。
  • 企業案件では利用規約・ライセンスを確認。著作権表示は通常不要だが商標利用等は規約に従う。
  • 完全な制御や長期安定が必要なら自己ホスティングも検討（ビルド時にサブセット化）。

参照

Graph View