Google Fontsの日本語フォント10選と使い方、表示速度を落とさない設定 (2026年版)

サイトに日本語のWebフォントを入れたら、なんとなく重くなった気がする。PageSpeed Insightsのスコアが落ちた。そんな心当たりがあるなら、原因はほぼフォントのウェイト数です。Noto Sans JPを100から900まで全部読み込んでいるサイトは、実際かなり多い。

Google Fontsとは、Googleが無料で公開しているWebフォントのサービスです。1,500書体を超えるオープンソースフォントを、CSSの数行を書き足すだけで自分のサイトに読み込めます。料金はゼロ、アカウント登録も不要。日本語書体も年々増えていて、2026年時点ではゴシック・明朝・丸ゴシック・UD書体まで一通り揃っています。

問題は、日本語フォントの「重さ」との付き合い方です。

Google Fontsとは？無料なのに商用OKな理由

Google Fontsに載っている書体は、ほぼすべてがSIL Open Font License（OFL）というオープンソースのライセンスで配布されています。このライセンスが、無料と商用利用の両立を可能にしています。

OFLでできることを整理します。

つまり、普通のWeb制作・アプリ開発でやりたいことは、ほぼ全部許されています。ここが有料フォントとの決定的な差です。日本語の商用フォントは1ウェイトで年間数万円かかることも珍しくないので、予算ゼロで明朝もゴシックも使えるのは破格と言っていい。

ただし一部の書体はApache Licenseなど別のライセンスで配布されています。実務で使う前に、fonts.google.comの各書体ページ下部にあるライセンス表記を1度は確認してください。

書体そのものの話に入る前に、日本語フォント特有の落とし穴を押さえておきます。ここを知らないまま導入すると、後で必ず速度で痛い目を見ます。

日本語フォントはなぜ重い？欧文との決定的な差

欧文フォントが収録する文字は、アルファベット・数字・記号を合わせても数百文字程度です。対して日本語は、ひらがな・カタカナに加えてJIS第1・第2水準の漢字まで含めると、1書体あたり7,000字を軽く超えます。

この差がそのままファイルサイズに出ます。欧文フォントが1ウェイト数十KBで済むところ、日本語フォントは1ウェイトで数MB規模。ウェイトを5つ読み込めば、それだけでページ全体の画像より重くなります。

ここが落とし穴。

救いはあります。Google Fontsは日本語書体をunicode-rangeという仕組みで細かく分割して配信していて、ブラウザは実際にページで使われている文字が含まれるかたまりだけをダウンロードします。全部で数MBあっても、実際に落ちてくるのは数百KBということも普通にある。この仕組みのおかげで、日本語Webフォントは「使い物になる」レベルまで来ました。

この表から読み取ってほしいのは1点だけです。日本語フォントで効くコスト削減は、ウェイトを減らすことです。他の小技はその後。

Google Fontsの日本語フォント10選

用途で選べるように、系統ごとに10書体を並べます。ウェイト数は読み込みコストに直結するので、選ぶときの判断材料として一緒に載せました。

つまり、本文はNoto Sans JPかM PLUS 2、見出しはZen Kaku Gothic NewかDela Gothic One、和風ならShippori Minchoという3択で大半の案件が片づきます。

番外として、Klee One（教科書体に近い手書き寄りの書体）、Kosugi Maru（1ウェイトのみで軽い丸ゴシック）、IBM Plex Sans JP、Murechoあたりも実務で使えます。特にKosugi Maruは、ウェイトが1つしかない分だけ読み込みが軽く済むので、速度優先の案件では地味に効きます。

ゴシック体4種、どれを選べばいい？

ゴシックは選択肢が多いぶん迷います。判断軸は「本文か見出しか」と「クセの強さ」の2つだけで足ります。

Noto Sans JP は基準点です。字形にクセがなく、100から900までの可変フォントとして提供されているので、ウェイト範囲を指定すれば1リクエストで細字と太字を両立できます。本文に使って外れることはまずありません。一択と言っていい安定感。

M PLUS 2 はNoto Sans JPよりやや現代的で、UI寄りの整った印象です。SaaSのダッシュボードやアプリ画面のように、情報密度が高い画面と相性がいい。

Zen Kaku Gothic New は字面が大きく、太いウェイトにすると見出しがしっかり決まります。本文に使うと文字が詰まって見えることがあるので、見出し専用に割り切るのが正解です。

BIZ UDPGothic はモリサワのUD（ユニバーサルデザイン）書体をベースにした系統で、濁点・半濁点や似た形の文字が判別しやすく設計されています。自治体サイト、医療系、業務システムのように「読み間違いが事故につながる」領域では、デザイン性より先にこちらを検討してください。ウェイトが2段階しかないのは、裏返せば読み込みが軽いという利点でもあります。

見た目の好みで選ぶ前に、ウェイトを何段階使うつもりかを決めておくと迷いが減ります。

明朝・丸ゴシック・個性派はどこで効く？

明朝体は、文章を読ませたいページで効きます。ニュース記事、インタビュー、オウンドメディアの本文。Noto Serif JP は明朝の標準として使えて、Shippori Mincho はもう少し和の空気があり、飲食・旅館・伝統工芸のようなブランドに合います。Zen Old Mincho はさらにクラシック寄りで、士業や老舗企業の見出しに使うと一発で格が出ます。

丸ゴシックは、緊張をほどきたい面に。Zen Maru Gothic は落ち着いた丸み、M PLUS Rounded 1c はよりポップで、ウェイトの幅が広いぶん使い回しが効きます。子供向けサービス、健康・介護、BtoCアプリのオンボーディング画面あたりが主戦場です。

個性派は、使う場所を1箇所に絞るのがコツ。

• Dela Gothic One: LPのキャッチコピー1行だけ。本文に使うと読めません
• Klee One: 手書き感のある注釈やコラム欄に
• DotGothic16: レトロゲーム風の演出。テーマが合わないと浮く
• Yusei Magic: 手書き風の見出し。バナー1枚に閉じる

個性の強い書体は、&text=パラメータで使う文字だけを読み込めば、コストをほぼゼロにできます。この書き方は後半で扱います。

3行で終わる導入手順

Google Fontsの読み込みは、HTMLに3行足すだけで終わります。fonts.google.comで書体とウェイトを選ぶと、右のパネルにコードが表示されます。

<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">

あとはCSSで指定します。フォールバックの指定を忘れないでください。Webフォントが落ちてくる前や、読み込みに失敗したときに表示される書体です。

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

CSS側で@importを使う書き方もありますが、@importはCSSの読み込みが終わるまでフォントの取得が始まらないため、表示が1テンポ遅れます。HTMLの<link>で書くほうが速い。ここは<link>一択です。

複数の書体をまとめて読み込むときは、family=を並べます。

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

コードは短い。むしろ大事なのは、この短いコードの中にあるパラメータをどう詰めるかです。

表示速度を落とさない設定5つ

日本語Webフォントで速度を守る手は、この5つでほぼ尽きます。効果が大きい順に並べました。

1. ウェイトを2つまでに絞る

最も効きます。本文用（400）と強調用（700）の2つで、たいていのデザインは成立します。300や500を足したくなったら、本当に見分けがつくか実機で確かめてください。日本語では細かいウェイト差はスマホ画面でほとんど伝わりません。

2. 可変フォントは範囲を指定する

Noto Sans JPのような可変フォントは、[email protected]と書くと全範囲を読み込みます。使う範囲だけに絞ります。

<!-- 全範囲。重い -->
family=Noto+Sans+JP:[email protected]
<!-- 400から700だけ。こちらを使う -->
family=Noto+Sans+JP:[email protected]

3. preconnectを2行入れる

fonts.googleapis.com（CSSの配信元）とfonts.gstatic.com（フォント本体の配信元）への接続を先に張っておく指定です。gstatic側にはcrossoriginが必要で、これを書き忘れると接続が張り直しになって効果が消えます。地味ですが、書き忘れが多いポイント。

4. display=swapを付ける

font-displayの挙動を指定するパラメータです。付けないと、Webフォントの読み込みが終わるまで文字が表示されない（FOIT）状態になり得ます。swapなら代替フォントで即座に表示し、届いた時点で差し替わります。

swapの弱点は、差し替わる瞬間に文字幅が変わってレイアウトがガタつくこと（CLS）です。気になる場合はフォールバックに近い字幅の書体を指定するか、optionalに切り替えます。

5. 見出し専用書体は&text=で切り出す

ロゴやキャッチコピーのように使う文字が決まっている場合、その文字だけを読み込めます。

<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&text=AIツール比較&display=swap" rel="stylesheet">

数文字ぶんしか落ちてこないので、極太書体でもコストはほぼ無視できます。個性派書体を使いたいときの逃げ道として覚えておく価値があります。

ここまでの整理: 日本語Webフォントの速度問題は、ウェイト数の掛け算です。1書体2ウェイトに絞り、可変フォントは範囲指定、preconnectとdisplay=swapを添える。この4点を守れば、体感で困ることはまずありません。

セルフホスティングに切り替えるべき？

Google FontsのCDNを使わず、フォントファイルを自分のサーバーに置く方法もあります。判断は分かれるところですが、次の条件に当てはまるならセルフホストを推します。

• EU圏の利用者が多い。ドイツでは2022年に、Google Fontsの外部読み込みで利用者のIPアドレスが第三者に渡る点を問題視した司法判断が出ています。EU向けサイトを運営するなら、法務と相談したうえで自己ホストが無難です
• 社内システムなど、外部通信を制限している環境で動かす
• 特定の文字だけに絞ったサブセットを自作して、極限まで軽くしたい

逆に、日本国内向けの一般的なサイトであれば、Google CDNのままで実害はありません。むしろ自己ホストは、フォントの更新追従・キャッシュ設定・unicode-rangeの分割を自前で管理する手間が増えます。分割を再現しないまま自己ホストして、かえって重くなっているサイトを見かけます。

要するに、法的な要件かオフライン要件がないなら、Google CDNのままでいい。手間に見合いません。

Next.jsを使っているなら話は別で、next/font/googleを書くだけでビルド時にフォントが自分のドメイン配下へ取り込まれます。外部リクエストが消え、CLS対策のサイズ調整も自動で入るので、フレームワークを使っている人はこちらが最短です。

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

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

WordPressの場合、テーマのfunctions.phpでwp_enqueue_styleを使って読み込むのが基本です。プラグインで足すとフロントとエディタで別々に読み込まれ、ウェイトが二重に増えることがあります。読み込み経路は1本にまとめてください。

本文と見出しのフォント組み合わせ

書体を2つ使うなら、役割を分けるのが原則です。同じ系統を並べても差が出ず、違いすぎると散らかります。実務で失敗しにくい組み合わせを挙げます。

同一書体でウェイトだけ変える組み合わせ（下2つ）は、読み込む書体が1つで済むので速度面で有利です。デザインの実験に時間をかけられない案件なら、この手が堅い。

配色まで含めて全体を詰めたいなら、ロゴとフォントを同時に検討したほうが早いです。ブランドの見た目を一気に固める流れは、AIロゴ作成の手順まとめで扱っています。フォントを決めてからロゴを作ると手戻りが減ります。

よくある失敗3つと直し方

失敗1: ウェイトを全部読み込んでいる

Google Fontsの選択画面でウェイトを次々チェックすると、生成されるURLがどんどん長くなります。wght@100;200;300;400;500;600;700;800;900のような指定を見つけたら、その場で2つに減らしてください。日本語サイトで最も多い速度劣化の原因がこれです。

失敗2: 一部の漢字だけ別のフォントで表示される

書体によっては、収録していない漢字があります。旧字体や記号でよく起きます。指定した書体に文字がないと、ブラウザはフォールバックの書体で表示するため、1文にゴシックと明朝が混ざったように見えます。社名や人名に旧字が入る場合は、実際の文字列で表示確認をしてください。

失敗3: 読み込み後にレイアウトがガタつく

代替フォントとWebフォントで文字の幅が違うと、差し替わった瞬間に行が動きます。フォールバックにヒラギノ角ゴやYu Gothicのような近い字幅の書体を指定する、あるいはfont-display: optionalに切り替えると収まります。Next.jsのnext/fontを使っている場合は、この調整が自動で入ります。

どれも設定1行で直る話です。裏を返せば、放っておいても勝手には直りません。

AI PICKS編集部の判定

日本語Webフォントの選択肢として、Google Fontsは一択です。無料で商用利用でき、ライセンス表記も不要、しかもunicode-rangeによる分割配信という日本語の弱点への対策まで済んでいる。有料フォントに月額を払う理由は、ブランド専用書体が必要な場合に限られます。

ただし「無料だから何でも読み込んでいい」という話にはなりません。日本語フォントは1ウェイトで数MB規模というコストが常に背後にあり、ウェイトを増やした瞬間にそのまま跳ね返ります。ここを理解せずに導入したサイトは、デザインは良くなったのに表示が遅くなるという、最も報われない結果になります。正直、その状態のサイトは相当多い。

推奨は明快です。本文はNoto Sans JPの400と700の2ウェイト、見出しに変化が欲しければZen Kaku Gothic Newの700を1つ足す。preconnectとdisplay=swapを添えて、それ以上は増やさない。この構成なら、速度で困ることはまず起きません。

書体を10個並べておいて言うのも何ですが、選ぶ楽しさに引きずられないことが一番の速度対策です。1書体2ウェイトから始めて、足りないと確信したときだけ増やす。この順番を守ってください。

あわせて見たいツール・カテゴリ

フォントが決まったら、デザイン全体の制作環境も見直すと作業が速くなります。

• Figma — Google Fontsの書体をそのまま呼び出せるUIデザインツール。実装前の見た目確認に
• Canva AI — バナーやSNS画像を作るなら。日本語フォントの選択肢が豊富
• Adobe Express — 素材とテンプレートが強い。印刷物まで一気通貫で作りたい人向け
• Framer — デザインからそのまま公開まで進めるWebサイト制作ツール
• AIデザインツールのカテゴリ一覧 — 制作フロー全体を組み直したいとき
• AI画像生成ツールのカテゴリ一覧 — 見出し画像やアイキャッチの調達に
• AIデザインツールの評価一覧 — 何から試すか決めきれないとき

サイトの見た目づくりを全体から組み立てるなら、AIロゴメーカーの無料ツールまとめとAIロゴ作成ツールの選び方が近い話題を扱っています。ロゴの書体とサイトの書体を揃えると、それだけで統一感が出ます。

アイキャッチ画像に文字を載せる場面が多いなら、IdeogramとChatGPTの画像生成の使い分けが参考になります。画像内の日本語テキストの扱いは、ツールごとに得意不得意がはっきり分かれます。

よくある質問（FAQ）

Q. Google Fontsは本当に完全無料ですか？

無料です。書体数・ウェイト数・ページビュー数のいずれにも課金は発生しません。アカウント登録も不要で、CSSのURLを書くだけで使えます。有料プランという概念自体がありません。

Q. 商用サイトで使うときにクレジット表記は必要ですか？

不要です。SIL Open Font Licenseはフォント名や作者名の表示を求めていません。クライアント案件の納品物でも、フッターに何か書く必要はありません。ただしフォントファイル単体を再配布する場合は、ライセンス文書を添付する必要があります。

Q. 日本語フォントを入れるとどのくらい遅くなりますか？

ウェイト数次第です。Google Fontsはunicode-rangeで書体を細かく分割して配信するため、ページで実際に使われている文字ぶんしかダウンロードされません。2ウェイトなら体感できるほどの遅延はまず出ませんが、9ウェイトを全部読み込むとモバイル回線ではっきり遅れます。

Q. Noto Sans JPとM PLUS 2はどちらを選ぶべきですか？

読み物中心のサイトならNoto Sans JP、アプリやダッシュボードのようにUI要素が多い画面ならM PLUS 2が合います。どちらも可変フォントで提供されているため、読み込みコストの差はほぼありません。迷ったらNoto Sans JPで問題ありません。

Q. 特定の漢字が別の書体で表示されるのはなぜですか？

指定した書体にその文字が収録されていないためです。ブラウザが自動でフォールバック書体に切り替えて表示しています。旧字体・異体字・一部の記号で起きやすいので、社名や人名を扱うページは実際の文字列で表示確認してください。

Q. WordPressのテーマにGoogle Fontsを追加するには？

テーマのfunctions.phpでwp_enqueue_styleを使い、Google FontsのCSS URLを登録するのが基本です。プラグイン経由で追加すると、テーマ側の読み込みと重複してウェイトが二重に増えることがあります。読み込み経路は必ず1本に統一してください。

Q. `@import`と``はどちらで書くべきですか？

<link>です。@importはCSSファイルの読み込みが完了してからフォントの取得が始まるため、表示が一段遅れます。HTMLの<head>内に<link>で書き、あわせてpreconnectを2行添えるのが最短経路です。

Q. EU向けのサイトでもGoogle Fontsを使えますか？

技術的には使えますが、外部読み込みの際に利用者のIPアドレスがGoogleへ送られる点が論点になります。ドイツでは2022年にこれを問題視した司法判断が出ているため、EU圏の利用者が多いサイトでは自己ホストへの切り替えを検討してください。日本国内向けであれば通常は問題になりません。

フォントを固めたら、次はサイト全体の見た目の設計に進むのが自然な流れです。デザインまわりをAIでどこまで巻き取れるかを知りたいなら、AIツール活用の全体ガイドを読んでおくと、どの工程を自動化してどこに時間を残すかの判断が早くなります。

各ツールの公式サイト（一次情報）

料金・機能・対応範囲は各社公式が一次情報です。本記事は公開時点の検証に基づきますが、最新かつ正確な条件は必ず各公式ページで確認してください。

• Figma Make — 公式サイト（AI PICKSの詳細）
• Canva AI — 公式サイト（AI PICKSの詳細）
• Adobe Express — 公式サイト（AI PICKSの詳細）