資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

Googleフォントの使い方｜日本語Webフォント導入と最適化

CSS

生徒

Googleフォントを使いたいんですが、日本語だと重くなるって聞いて不安で…

ペン博士

大丈夫、コツがあるよ！linkタグで読み込んで、font-display:swapとpreconnect、必要ならサブセット化すれば重さはかなり抑えられる。今日は導入から最適化まで一気に解説するね。

Webサイトに個性的なフォントを使いたいけれど、どうやって設定すればいいかわからない――そんな疑問を持ったことはありませんか。システムフォントだけではデザインに限界があり、かといってフォントファイルを自前で用意するのは大変です。そこで便利なのがGoogle Fontsです。

Google Fontsは1,500種類以上のフォントを無料で提供しているサービスで、HTMLに数行書き足すだけでサイトにWebフォントを適用できます。日本語フォントにも対応しており、「Noto Sans JP」や「Noto Serif JP」などを使えばきれいな日本語Webフォントを手軽に導入できます。

この記事ではGoogle Fontsの基本的な使い方から日本語フォントの特性、表示速度の最適化、セルフホストの方法、可変フォントの活用まで網羅的に解説します。コードはすべてコピペで使えるよう整理しています。

  • Google Fontsでフォントを選ぶ手順と埋め込み方（linkタグ・@import）
  • font-familyの正しい指定方法とフォールバックの書き方
  • 日本語フォント（Noto Sans JP等）の特性と遅い理由
  • font-display: swapとpreconnectでCLSを改善する方法
  • サブセット化で日本語フォントを軽くする技術
  • セルフホストで外部依存をなくす方法（fontsource）
  • 可変フォント（Variable Font）の使い方とメリット
目次

Google Fontsとは？無料で使えるWebフォントサービス

Google Fontsはシステムフォントにはないデザイン性の高いフォントをCDN経由で配信するGoogleのサービスです。利用は完全無料で、商用利用もOK。ライセンスはSIL Open Font License（OFL）が多く、Webサイトだけでなく印刷物やアプリにも使えます（フォントごとにライセンス確認を推奨）。

Google Fontsの主なメリット

  • 無料・商用利用可（OFLライセンス）
  • CDNによる高速配信（Googleのインフラ活用）
  • 1,500種類以上のフォントバリエーション
  • 日本語フォント（Noto Sans JP・Noto Serif JPなど）も提供
  • 可変フォント（Variable Font）に対応したフォントも多数
  • フォントファイルを自前管理しなくてよい

注意点

  • 外部サービス依存のため、Googleのサーバーがダウンした場合にフォントが表示されない（セルフホストで回避可）
  • GDPR・個人情報保護の観点からGoogleへのIPアドレス送信が問題になることがある（EU圏向けサービスは特に注意）
  • 日本語フォントはファイルサイズが大きくパフォーマンスに影響しやすい

Google Fontsでフォントを選ぶ手順

選ぶ4ステップ

fonts.google.comにアクセスし、使いたいフォントを選びます。手順を追って解説します。

  1. 検索バーでフォント名を入力、またはカテゴリ（Serif / Sans Serif / Monospace等）でフィルタリング
  2. フォントカードをクリックしてフォント詳細ページを開く
  3. 「Select this style」ボタンで使いたいウェイトを選択（右パネルに追加される）
  4. 右パネルの「Use on the web」セクションからlinkタグまたは@importをコピー

日本語フォントを探す場合は検索で「Noto Sans JP」や「BIZ UDPGothic」などと入力するか、上部の「Language」フィルターで「Japanese」を選択します。

linkタグでGoogle Fontsを埋め込む方法（推奨）

読み込みの流れ

Google Fontsの埋め込みには2つの方法があります。HTMLの<head>内に<link>タグを記述する方法が推奨です。CSSファイルの@importより先にブラウザがフォントのダウンロードを開始できるため、表示が速くなります。

英語フォント（Inter）の導入例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Fonts サンプル</title>

  <!-- 推奨：preconnectで接続を先行確立 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Google Fontsのlinkタグ -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Hello, Google Fonts!</p>
</body>
</html>

preconnectを使うことで、ブラウザがHTMLを解析しながらGoogleのフォントサーバーとの接続を確立でき、フォントのダウンロード開始を早められます。crossorigin属性はfonts.gstatic.com（フォントファイルの実際の配信元）に必ず付けてください。

CSSでfont-familyを指定する

/* style.css */
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.bold {
  font-weight: 600;
}

font-familyには必ずフォールバック（汎用フォントファミリー）を指定してください。Webフォントの読み込みに失敗した場合に、次のフォントで代替表示されます。英語フォントならsans-serifかserif、日本語対応が必要なら後述のフォールバックスタックを使います。

@importでGoogle Fontsを埋め込む方法

CSSファイルの先頭に@importを書く方法もあります。WordPressのstyle.cssやSassファイルで管理したい場合に便利ですが、CSSの解析後に読み込みが始まるためlinkタグより若干遅くなります。

/* style.cssの先頭に記述（CSSファイル内でのみ使用する場合） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

パフォーマンス面ではlinkタグの方が優れているため、特別な理由がなければlinkタグを使いましょう。

日本語フォントの導入（Noto Sans JP・Noto Serif JP）

日本語フォントは英語フォントと比較してファイルサイズが非常に大きい特徴があります。英語の場合は使用する文字数が26文字（アルファベット）＋記号程度ですが、日本語は常用漢字だけで2,136文字、それに加えてひらがな・カタカナ・記号が含まれるため、フォントファイルが数MB以上になることもあります。

Noto Sans JPの導入コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日本語Webフォントサンプル</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Noto Sans JP（日本語）+ Inter（英数字） -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
</html>

/* 日本語サイトのfont-family設定 */
body {
  /* 英数字はInter、日本語はNoto Sans JP、フォールバックはシステムフォント */
  font-family:
    'Inter',
    'Noto Sans JP',
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    Meiryo,
    sans-serif;
}

/* 見出しに明朝体（Noto Serif JP）を使う例 */
h1, h2 {
  font-family:
    'Noto Serif JP',
    'Hiragino Mincho ProN',
    'Yu Mincho',
    serif;
  font-weight: 700;
}

英数字フォント（Inter）を日本語フォント（Noto Sans JP）より前に記述することで、半角英数字はInterで、日本語文字はNoto Sans JPで表示されます。フォントはfont-familyに記述した順に優先されますが、対応文字コードにない文字は次のフォントへフォールバックするためこの記述が機能します。

Google Fontsが提供する主な日本語フォント

フォント名 種類 特徴・用途
Noto Sans JP ゴシック体 可読性が高くWeb本文に最適。最もよく使われる
Noto Serif JP 明朝体 落ち着いた印象。ブログ・記事サイトの本文に
BIZ UDPGothic ゴシック体 ビジネス文書向け。UD（ユニバーサルデザイン）フォント
BIZ UDPMincho 明朝体 ビジネス文書向けの明朝体版
Zen Kaku Gothic New ゴシック体 モダンでスッキリした印象。見出しにも本文にも
Shippori Mincho 明朝体 繊細で美しい明朝体。高級感のあるサイトに
M PLUS Rounded 1c 丸ゴシック 柔らかく親しみやすい印象。子ども向け・カジュアルなサイトに

font-display: swapでCLSを防ぐ

Webフォントの読み込みには時間がかかるため、読み込み完了前の表示方法を制御するfont-displayプロパティが重要です。Google FontsのURLにdisplay=swapを付けることで、フォント読み込み中はシステムフォントで表示し、読み込み完了後にWebフォントに切り替わります。

<!-- URLの末尾に &display=swap を付ける -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

/* @font-faceを自前で定義する場合はfont-displayプロパティで指定 */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap; /* フォント未読込み中はフォールバックフォントを表示 */
}

/* font-displayの各値の違い */
/* auto    : ブラウザのデフォルト動作 */
/* block   : 最大3秒非表示（FOIT） */
/* swap    : ずっとフォールバック→切り替え（FOUT）← 推奨 */
/* fallback: 100ms非表示→3秒フォールバック→切り替えなし */
/* optional: 100ms以内に読み込めなければフォールバックのまま */

font-display: swapを使うとフォント切り替え時にレイアウトが少しずれる（CLS：Cumulative Layout Shift）が発生することがあります。これを最小化するには、Webフォントとフォールバックフォントのサイズ差をsize-adjust・ascent-override・descent-overrideで調整することが有効です（上級者向け）。

サブセット化で日本語フォントを軽くする

軽量化のコツ

日本語フォントの最大の問題はファイルサイズです。Google Fontsではtext=パラメータを使ってサイトで実際に使う文字だけを指定（サブセット化）することで配信ファイルを大幅に削減できます。

textパラメータによるサブセット化

<!-- ロゴや見出しに使う特定の文字だけをサブセット化 -->
<!-- 例：「株式会社ウェブデザイン」という文字だけ使う場合 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&text=株式会社ウェブデザイン&display=swap" rel="stylesheet">

textパラメータはロゴのような固定テキストに非常に有効です。「全文字が必要なのは本文だけで見出しは決まった文言しか使わない」というケースでは、本文用と見出し用でフォントリクエストを分けるのが効率的です。

Google Fontsが自動で行うサブセット最適化

実は、Google Fonts自体がブラウザのUser-Agentヘッダを見て、そのブラウザが対応している形式（woff2やwoff）・必要な文字セットのみを含むCSSを返すよう最適化しています。また日本語フォントはUnicode-rangeによる分割配信（必要な文字ブロックだけを取得）も行われています。

fontsourceを使ったセルフホスト方法

Googleのサーバーに依存せず自分のサーバーからフォントを配信したい場合はfontsourceが便利です。fontsourceはGoogle Fontsのフォントをnpmパッケージとして提供しており、自前のサーバーからホスティングできます。

fontsourceのインストールと使い方

/* npmでフォントをインストール */
/* npm install @fontsource/noto-sans-jp */
/* npm install @fontsource/inter */

/* JavaScriptファイルでインポート（Next.js・Viteなど） */
/* import '@fontsource/inter/400.css'; */
/* import '@fontsource/inter/700.css'; */
/* import '@fontsource/noto-sans-jp/400.css'; */

/* またはCSSファイルでインポート */
/* @import '@fontsource/inter/400.css'; */
/* @import '@fontsource/noto-sans-jp/400.css'; */

/* 可変フォント版（@fontsource-variable）を使う場合 */
/* npm install @fontsource-variable/inter */
/* npm install @fontsource-variable/noto-sans-jp */

/* CSSでインポート */
/* @import '@fontsource-variable/inter'; */

body {
  font-family: 'Inter Variable', 'Noto Sans JP', sans-serif;
}

fontsourceを使うメリットは、外部リソースへの依存がなくなりプライバシー問題（GDPR）やオフライン対応が容易になる点です。ビルド時にフォントファイルがプロジェクトに含まれるため、Googleのダウンタイムに影響を受けません。

可変フォント（Variable Font）の使い方

静的 と 可変

可変フォント（Variable Font）は、1つのフォントファイルに複数のウェイト・スタイルのバリエーションが含まれた次世代フォント形式です。通常、Regular（400）・Bold（700）などのウェイトを別々のファイルで読み込む必要がありますが、可変フォントなら1ファイルで任意のウェイト・スタイルを連続的に指定できます。

可変フォントのGoogle Fonts URLと指定方法

<!-- 可変フォント（Inter）のlinkタグ -->
<!-- ウェイトを 100..900 の範囲で指定（2つの値をふたつのピリオドで区切る） -->
<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@100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

/* 可変フォントの使用例 */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400; /* 通常の本文 */
}

h1 {
  font-weight: 800; /* 任意の値が使える（100〜900の範囲） */
}

.light {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

/* font-variation-settingsで軸を直接指定（上級） */
.custom-weight {
  font-variation-settings: 'wght' 650; /* ウェイト650 */
}

可変フォントの最大のメリットはファイルサイズの削減と柔軟性です。通常3ウェイト分のファイルが必要なところが1ファイルで済み、さらにCSSで途中の値（例：font-weight: 530）も自由に指定できます。

パフォーマンス最適化のまとめ

Google Fontsを使う際のパフォーマンス最適化ポイントを整理します。

対策 効果 難易度
preconnectタグを追加 接続確立を先行してフォント取得を高速化 低
display=swapを付ける フォント未読込み中も文字を表示（CLSを軽減） 低
使うウェイトだけを選択 不要なウェイトのダウンロードを省略 低
可変フォントを使う 複数ウェイトを1ファイルで管理、柔軟に指定可能 低
textパラメータでサブセット化 固定テキスト（ロゴ等）のファイルサイズを大幅削減 中
fontsourceでセルフホスト 外部依存排除・GDPR対応・オフライン対応 中
フォントをpreloadする フォントファイルを最優先で取得 高

フォントのpreloadによる高速化（上級）

<!-- 特定のフォントファイルを最優先で取得（セルフホスト時に有効） -->
<link rel="preload"
      href="/fonts/inter-variable.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<!-- @font-faceの定義 -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
  }
</style>

rel="preload"を使うことでブラウザがフォントを他のリソースより先に取得します。ただしGoogle Fonts CDN経由では正確なフォントファイルURLが動的に変わるため、preloadはfontsourceなどセルフホスト時に真価を発揮します。

Google FontsのライセンスについてのQ&A

Google Fontsの大多数はSIL Open Font License 1.1（OFL）または Apache License 2.0 のもとで提供されています。どちらも以下の用途に使用可能です。

  • 商業サイト・企業サイトでの使用（OK）
  • 印刷物・広告への埋め込み（OK）
  • アプリへの組み込み（OK）
  • フォントそのものを単体販売（NG：OFLの場合）

フォント選択画面に「License」タブがあるので、使用前に必ず確認しましょう。

まとめ

Googleフォントは、linkタグでの読み込みが基本で、日本語は容量対策が肝心です。ポイントは①font-display: swapで表示を止めない②preconnectで接続を先に張る③textパラメータやサブセットで容量を削る、の3点。セルフホストや可変フォントも紹介したので、デザインと表示速度のバランスで選んでください。

よくある質問（FAQ）

Google Fontsは有料ですか？商用利用はできますか？

Google Fontsは完全無料です。商用利用も可能ですが、フォントごとにライセンス（ほとんどはOFL）を確認してください。OFLではWebサイト・印刷物・アプリへの組み込みはOKですが、フォント自体を単体で販売することは禁止されています。

日本語フォントを使うとサイトが遅くなりますか？

日本語フォントは英語フォントの数十倍のファイルサイズになることがあるため、パフォーマンスへの影響は大きいです。対策として、①必要なウェイトだけ読み込む、②display=swapを使う、③preconnectを設定する、④サブセット化する（固定テキストのみ）、⑤可変フォントを使う、といった手順を踏むことで影響を最小化できます。

WordPressでGoogle Fontsを使うにはどうすればいいですか？

SWELLなどのWordPressテーマでは管理画面からWebフォントを選択できることがあります。テーマにない場合は、functions.phpにwp_enqueue_style()を追加してGoogle FontsのURLをエンキューします。またはwp_headフックでpreconnectとlinkタグを直接headに出力する方法も使われます。プラグイン「OMGF (Optimize My Google Fonts)」を使えばコーディング不要でセルフホストへの変換もできます。

linkタグと@importはどちらを使うべきですか？

パフォーマンス面ではlinkタグが推奨です。@importはCSSの解析が始まってからフォントの取得が開始されるため、表示がわずかに遅れます。特別な理由（CSSファイルで一元管理したいなど）がない限りlinkタグを使いましょう。

GDPR（EU一般データ保護規則）への対応が必要ですか？

EU圏のユーザーを対象とするサービスでは、Google FontsをCDN経由で使うとユーザーのIPアドレスがGoogleに送信されるためGDPR上の問題になる可能性があります。ドイツの裁判所が問題と判断した事例もあります。EU向けサービスではfontsourceを使ったセルフホストに切り替えることでこの問題を回避できます。

あわせて読みたい関連記事

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！WithAI

今なら完全無料でAIを学べる！

  • 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
  • スマホ・PCどちらでもOK：好きな時間に学習できる
  • 料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート
CSS

この記事を書いた人

田中誠のアバター 田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

関連記事

  1. ホーム
  2. プログラミング
  3. CSS
  4. Googleフォントの使い方｜日本語Webフォント導入と最適化

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次