この記事の対象: 日本語Webフォントを導入・見直したいWeb制作者
読了時間: 約12分
Webフォントを使えば、デバイスやOSに関係なく意図した書体でテキストを表示できます。Googleフォントは無料で日本語書体も充実しており、ゴシック・明朝・丸ゴシックに加えて手書き風フォントまで揃っています。
ただし日本語フォントは英語フォントに比べてファイルサイズが大きく、読み込み方を間違えるとページの表示速度に直結します。「どのフォントを選ぶか」と同じくらい「どう読み込むか」が重要です。
この記事では、Googleフォントの日本語書体をゴシック・明朝・丸ゴシック・手書き風の4系統に分けて紹介し、用途別の選び方から、パフォーマンスを落とさない実装方法までを一本で解説します。
Googleフォントとは｜日本語フォントの対応状況
Googleフォントは、Googleが提供する無料のWebフォントサービスです。1,700以上のフォントファミリーが公開されており、日本語フォントは2026年時点で50書体以上が利用できます。
すべてのフォントがSIL Open Font License（OFL）またはApache License 2.0で提供されているため、個人・商用を問わず無料で使えます。
Webフォントの最大のメリットは、閲覧環境に依存しないこと。デバイスフォントだけに頼るとWindowsとmacOSで見た目が変わりますが、Googleフォントならどの環境でも同じ書体で表示されます。
日本語Googleフォントの分類
Googleフォントに収録されている日本語書体は、大きく4つの系統に分けられます。
| 系統 | 特徴 | 代表フォント |
|---|---|---|
| ゴシック体 | 線の太さが均一。画面での視認性が高く、Web本文の定番 | Noto Sans JP |
| 明朝体 | 横線が細く縦線が太い。上品さや格式を表現できる | Noto Serif JP |
| 丸ゴシック | ゴシック体の角を丸めた書体。柔らかく親しみやすい | M PLUS Rounded 1c |
| 手書き風 | 手書きの温かみを感じる書体。カフェ・教育系に人気 | Klee One |
次の章から、系統ごとにおすすめフォントを紹介します。
ゴシック体のおすすめ日本語Googleフォント
ゴシック体はWeb制作で最も使用頻度の高い書体です。線の太さが均一で画面上の可読性に優れ、本文・見出し・UIパーツまで幅広く対応します。
Noto Sans JP
Googleが「世界中の言語をカバーする」目的で開発したNotoファミリーの日本語ゴシック。100〜900の9ウェイトに対応しており、見出しから本文まで1つのフォントファミリーで統一できます。
迷ったらまずNoto Sans JPを選んでおけば間違いありません。コーポレートサイト、メディア、ECなど業種を問わず使えます。
BIZ UDPゴシック
モリサワが開発したユニバーサルデザイン（UD）フォント。文字のふところが広く、小さいサイズでも判読しやすい設計です。等幅版の「BIZ UDゴシック」も用意されています。
自治体サイトや公共サービスなど、可読性とアクセシビリティを重視する案件に最適です。
Zen Kaku Gothic New
幾何学的でモダンなゴシック体。欧文部分のデザインにも力が入っており、英語と日本語が混在するバイリンガルサイトやテック系のサイトに適しています。4ウェイト（400・500・700・900）対応。
M PLUS 1p
M PLUSシリーズの標準ゴシック。Noto Sans JPよりやや字面がコンパクトで、7ウェイトに対応しています。モダンなデザインやスタートアップ系サイトに合います。
明朝体のおすすめ日本語Googleフォント
明朝体は横線が細く縦線が太い伝統的な書体で、和のテイスト・高級感・格式を表現できます。Webでは見出しやキャッチコピーに使われることが多いですが、本文に使えば雑誌のような雰囲気が出ます。
Noto Serif JP
Notoファミリーの日本語明朝体。7ウェイト対応で、読みやすさと上品さのバランスが取れています。旅館・ホテル・高級ブランド・出版系のサイトで定番の選択肢です。
Shippori Mincho（しっぽり明朝）
オールドスタイルの明朝体で、伝統的で格式のある印象を与えます。5ウェイト（400〜800）対応。縦書きとの相性もよく、和食・日本酒・伝統工芸など日本文化に関わるサイトに映えます。
やや太めのバリエーション「Shippori Mincho B1」もあり、本文の可読性を高めたいときに使えます。
Zen Old Mincho
古典的な明朝体を現代的にリファインしたフォント。Shippori Minchoより端正な印象で、文学系メディアや出版サイトの本文に向いています。
Sawarabi Mincho（さわらび明朝）
Web表示での可読性を意識して設計された明朝体。1ウェイトのみですが、本文テキストに使いやすいバランスです。
丸ゴシックのおすすめ日本語Googleフォント
丸ゴシックはゴシック体の角を丸くした書体で、柔らかさ・親しみやすさ・やさしさを表現できます。教育系・保育系・カジュアルなブランドのサイトで重宝します。
M PLUS Rounded 1c
日本語丸ゴシックの定番。7ウェイト対応で見出しから本文まで柔軟に使えます。子供向けサービスやカジュアルなWebサービスに最適です。
Zen Maru Gothic
Zenファミリーの丸ゴシック。M PLUS Rounded 1cよりやや落ち着いた印象で、5ウェイト（300〜900）に対応しています。カジュアルすぎないデザインに丸ゴシックを取り入れたいときに便利です。
Kosugi Maru（小杉丸ゴシック）
コンパクトな字面でカジュアルかつ読みやすいフォント。1ウェイトのみですが、ブログやSNS関連サービスなど軽い印象のサイトに向いています。
手書き風のおすすめ日本語Googleフォント
手書き風フォントは、温かみや人の気配を感じさせる書体です。カフェ・ベーカリー・教育機関・ハンドメイド系のサイトで、テキストにぬくもりを加えたいときに使います。
ただし手書き風フォントを本文全体に使うと読みにくくなります。見出し・キャッチコピー・装飾的な一文に限定し、本文はゴシック体や丸ゴシックと組み合わせるのが基本です。
Klee One
教科書体に近い手書き風フォント。整った字形で可読性が高く、手書き風フォントの中では本文にも使える数少ない書体です。2ウェイト（Regular 400・SemiBold 600）対応。
教育系サイトやナチュラルテイストのブランドサイトに合います。
Yomogi（よもぎ）
丸みのある柔らかい手書き文字。Klee Oneよりもカジュアルで、手紙や日記のような温かさを演出できます。カフェ・ベーカリー・子供向けサイトに。1ウェイト（400）のみ。
Zen Kurenaido（ZEN紅道）
筆で書いたような流れのある手書き風フォント。和テイストが強く、和菓子・茶道・書道など日本文化に関わるサイトの見出しやキービジュアルに映えます。1ウェイト（400）のみ。
Hachi Maru Pop（はちまるポップ）
子供が書いたようなポップで丸い手書き文字。遊び心のある印象で、子供向けサービスやエンタメ系のサイトに。1ウェイト（400）のみで、使う箇所は見出しや装飾テキストに絞りましょう。
手書き風フォントと本文フォントの組み合わせ
手書き風フォントを使うときは、本文用フォントとの組み合わせが大切です。見出しだけに手書き風を使い、本文はゴシック体にするのが安全なパターンです。
/* 見出しに Klee One、本文に Noto Sans JP */
h1, h2, h3 {
font-family: 'Klee One', cursive;
}
body {
font-family: 'Noto Sans JP', sans-serif;
}
見出しで温かみを出しつつ、本文の可読性を保てます。
用途・業種別の日本語Googleフォントの選び方
フォントは見た目の好みだけで選ぶと、サイトの目的や業種とちぐはぐな印象になることがあります。業種別の推奨パターンをまとめました。
| 業種・用途 | おすすめフォント | 理由 |
|---|---|---|
| コーポレートサイト全般 | Noto Sans JP | 癖がなく信頼感がある |
| 公共・自治体 | BIZ UDPゴシック | UD設計で誰にでも読みやすい |
| 旅館・ホテル・和食 | Noto Serif JP / Shippori Mincho | 和の格式・高級感を演出 |
| カフェ・ベーカリー | Klee One（見出し）+ Noto Sans JP（本文） | 温かみと可読性の両立 |
| 教育・保育 | M PLUS Rounded 1c | 柔らかく親しみやすい |
| テック・スタートアップ | Zen Kaku Gothic New | モダンで洗練された印象 |
| ハンドメイド・雑貨 | Yomogi（見出し）+ Zen Maru Gothic（本文） | 手作り感のある温かさ |
| 日本文化・伝統工芸 | Zen Kurenaido（見出し）+ Noto Serif JP（本文） | 筆の質感と可読性 |
フォントを2種類以上使う場合は、同系統同士（ゴシック×ゴシック）を避け、ゴシック×明朝や手書き×ゴシックのように系統をずらすとメリハリが出ます。
フォント選びはサイトのブランディングと密接に関わります。書体を決める前に「誰に何を伝えたいか」を整理しておくと、選定に迷いません。
Googleフォント日本語の実装コード
ここからは実装の解説です。読み込み方法とパフォーマンスを考慮した設定を、コピーして使えるコードで示します。
linkタグで読み込む（推奨）
HTMLの<head>内に<link>タグを書く方法が標準です。
<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">
body {
font-family: 'Noto Sans JP', sans-serif;
}
最初の2行はpreconnectによるGoogleフォントCDNへの事前接続です。DNS解決・TCP接続・TLSハンドシェイクを前もって済ませるため、フォントファイルの取得が速くなります。セットで書くのを忘れないでください。
@importは使わない
CSSの@importで読み込む方法もありますが、CSSの解析をブロックするため表示速度で不利です。
/* 非推奨 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
<link>タグ（推奨）
- HTMLと並行して読み込める
- レンダリングへの影響が小さい
- preconnectと組み合わせやすい
@import（非推奨）
- CSSの解析をブロックする
- 読み込みが直列になる
- 表示速度で不利
特別な理由がない限り<link>タグを使いましょう。
必要なウェイトだけ読み込む
日本語フォントはファイルサイズが大きいため、使わないウェイトを読み込むと表示速度に響きます。
Noto Sans JPは9ウェイトに対応していますが、多くのサイトでは本文用の400と見出し用の700だけで十分です。
<!-- 良い例: 必要な2ウェイトだけ -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<!-- 悪い例: 全ウェイトを読み込む（重い） -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
デザインカンプを確認し、実際に使うウェイトだけ指定してください。
複数フォントを1つのリクエストにまとめる
見出しと本文で異なるフォントを使う場合、family=パラメータを&でつなげて1回のリクエストにまとめられます。
<!-- Klee One（見出し）と Noto Sans JP（本文）をまとめて読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
個別に<link>を書くよりHTTPリクエストが減り、読み込みが効率的になります。
font-displayの値と使い分け
URLのdisplay=パラメータで、フォント読み込み中の表示挙動を制御できます。
| 値 | 挙動 | 向いている用途 |
|---|---|---|
swap |
システムフォントで即表示 → 読み込み後に切り替え | 本文テキスト全般（推奨） |
fallback |
短時間だけ代替表示 → 遅い場合は切り替えない | レイアウトシフトを抑えたい場合 |
optional |
高速なら切り替え、遅ければそのまま | パフォーマンス最優先 |
block |
最大3秒テキスト非表示 → フォントで表示 | ロゴ・アイコンフォント |
一般的なサイトではswapを指定しておけば問題ありません。テキストが一瞬システムフォントで表示された後にWebフォントへ切り替わるFOUT（Flash of Unstyled Text）が発生しますが、テキストが読めない時間をゼロにできるため、ユーザー体験としてはblockより優れています。
日本語Googleフォントが重い理由と表示速度の最適化
なぜ日本語フォントはファイルサイズが大きいのか
英語フォントはアルファベット・数字・記号で約200〜300グリフをカバーすれば済み、ファイルサイズは20〜50KB程度です。
日本語フォントはひらがな・カタカナ・漢字（JIS第1〜第4水準）を含めると数千〜1万文字以上を収録する必要があり、全体のファイルサイズは数MBに達します。何も工夫せずに読み込むと、ページの表示が目に見えて遅くなります。
unicode-rangeによる自動分割配信
Googleフォントはこの問題に対し、unicode-rangeを使った分割配信で対応しています。
仕組みはこうです。フォントファイルをUnicodeの文字コード範囲ごとに100以上のスライスに分割し、ページ内で実際に使われている文字のスライスだけをブラウザがダウンロードします。
Googleフォントのcss2 APIが返すCSSには、以下のような@font-faceルールが大量に含まれています。
/* Googleフォントが返すCSSの一部（概要） */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notosansjp/...woff2) format('woff2');
unicode-range: U+4E00-4E01, U+4E03, U+4E07-4E0B, ...;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/notosansjp/...woff2) format('woff2');
unicode-range: U+3041-3093, U+3099-309F, ...;
}
ブラウザはページ内のテキストを解析し、該当するunicode-rangeのファイルだけをリクエストします。全文字セットをダウンロードするよりもはるかに少ないデータ量で済む仕組みです。
この処理はGoogleフォントのAPIが自動で行うため、開発者側の設定は不要です。<link>タグで正しく読み込むだけで恩恵を受けられます。
textパラメータで使う文字を限定する
ナビゲーションや見出しなど、表示する文字が決まっている場合はtextパラメータで必要な文字だけを指定できます。
<!-- 「お問い合わせ」の5文字だけ読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho&text=お問い合わせ&display=swap" rel="stylesheet">
固定テキストにだけWebフォントを使うケースでは、フォントファイルのサイズを劇的に小さくできます。
表示速度への影響を確認する手順
Googleフォントがページの表示速度にどの程度影響しているか、Chrome DevToolsで確認できます。
Networkタブで確認する方法:
- Chromeで対象のページを開く
- DevToolsを起動する（macOS:
Cmd + Option + I、Windows:F12） - Networkタブを選び、フィルタ欄に
fontと入力する Cmd + Shift + R（Windows:Ctrl + Shift + R）でキャッシュなしリロード- 表示されたフォントファイルの数・サイズ・読み込み時間を確認する
確認のポイントは以下の3つです。
- ファイル数: unicode-range分割により複数のwoff2ファイルが読み込まれる。ページで使っている漢字が多いほどファイル数は増える
- 合計サイズ: 日本語フォント1ウェイトあたり、一般的なページで200〜500KB程度が目安
- 読み込み時間: preconnectが効いていれば、個々のファイルは100ms以内に取得できることが多い
Lighthouseでの確認:
- DevToolsのLighthouseタブを開く
- 「Performance」にチェックを入れて分析を実行
- 結果の「Diagnostics」で「Eliminate render-blocking resources」にフォント関連の指摘がないか確認する
- 指摘があれば、preconnectの追加やウェイトの削減を検討する
Googleフォントの商用利用とライセンス確認
Googleフォントのすべてのフォントはオープンソースライセンスで提供されています。大半がSIL Open Font License 1.1（OFL）、一部がApache License 2.0です。
商用利用でできること
- Webサイト（個人・法人問わず）での表示
- 印刷物（名刺・チラシ・パッケージなど）への使用
- アプリやソフトウェアへの組み込み
- フォントを改変した派生フォントの作成と配布（OFLの条件に従う）
通常のWebフォントとしての利用であれば、ライセンス上の制約を気にする場面はほぼありません。
ライセンスの確認方法
各フォントのライセンスはGoogle Fontsのフォント詳細ページで確認できます。フォント名で検索し、詳細ページ右側の「License」欄に記載されています。
実務で確認が必要になるのは主に以下の2つのケースです。
- クライアントワークで納品するとき: ライセンスがOFLであることを確認し、求められればクライアントに共有する
- フォントファイル自体を改変するとき: OFLでは改変後のフォントを同一ライセンスで公開する必要がある。元のフォント名をそのまま使えない制約もある
よくある質問
Googleフォントの日本語で一番おすすめはどれですか？
迷ったらNoto Sans JPを選んでください。9ウェイト対応で業種を問わず使え、Googleが継続的にメンテナンスしているため文字の欠落や表示崩れのリスクも低い書体です。和の雰囲気を出したい場合はNoto Serif JPが候補になります。
手書き風の日本語Googleフォントは本文に使えますか？
Klee Oneであれば本文にも使えます。教科書体に近い整った字形で、手書き風フォントの中では可読性が高い書体です。Yomogi・Hachi Maru Pop・Zen Kurenaidoは装飾性が強いため、見出しやキャッチコピーなど短いテキストに限定するのが無難です。
Googleフォントを使うとサイトが重くなりますか？
何も工夫しなければ影響は出ます。ただしGoogleフォントはunicode-rangeによる自動分割配信に対応しているため、正しく実装すれば影響を最小限に抑えられます。ウェイトを2つに絞る、preconnectを設定する、display=swapを指定する。この3点を守れば、体感速度の低下はほぼ気にならないレベルです。
Googleフォントは商用サイトでも無料で使えますか？
はい、すべてのフォントがSIL Open Font LicenseまたはApache License 2.0で提供されており、商用サイトでも無料で利用できます。クライアントワークでの使用も問題ありません。フォントファイルを改変して再配布する場合のみ、ライセンス条件の確認が必要です。
Googleフォントをセルフホスティングするメリットは何ですか？
GoogleのCDNを使わず、フォントファイルを自分のサーバーに置く方法です。外部CDNへの接続が不要になりプライバシー面で有利なこと、CDN障害の影響を受けないことがメリットです。一方、unicode-rangeの自動分割配信を受けられず、自分でサブセット化を行う必要があります。GDPR対応が求められる欧州向けサイトや、外部リソースの利用を制限しているプロジェクトで検討してください。
まとめ
Googleフォントの日本語書体を選ぶポイントと実装方法を振り返ります。
- ゴシック体は本文に最適。迷ったらNoto Sans JPを選ぶ
- 明朝体は和のテイスト・高級感に。Noto Serif JPとShippori Minchoが定番
- 丸ゴシックは親しみやすさに。M PLUS Rounded 1cが最も汎用的
- 手書き風はKlee Oneが最も実用的。本文にも使える唯一の手書き系
<link>タグ +display=swap+preconnectの3点セットで読み込む- ウェイトは使うものだけに絞る（多くの場合400と700で十分）
- unicode-rangeの分割配信により、日本語フォントの重さは自動的に軽減される
- すべて商用利用可能。ライセンスはSIL OFLまたはApache 2.0
フォントはサイトの第一印象を左右する要素です。書体の選定と正しい実装で、デザインの完成度と表示速度を両立させてください。
