Googleフォント日本語の使い方・ダウンロード｜埋め込みコード作成と転送量の実測

2通りの使い方

使う場所	方法	Google Fonts の画面で押すボタン
Webページ・ブログ	HTML の head に link を書き、CSS の font-family で書体名を指定する（ファイルは不要）	Get font → Get embed code
PC のアプリ（Word・PowerPoint・デザインアプリなど）	フォントファイルをダウンロードして PC にインストールする	Get font → Download all

ボタン名は 2026-10-05 に Google Fonts の英語表示の画面で確認したものです。

埋め込みコードを作る

書体・ウェイト・表示の切り替え方（display）を選ぶと、head に貼る link と CSS ができます。使う字が決まっている見出しなら「使う文字だけ読み込む」を選ぶと、その字だけのファイルになります。

書体

display

ウェイト

使う文字だけ読み込む（text=）読み込む文字

あいうえお日本語フォントの美しさを比べる。永国東

HTML（head の中に貼る）

CSS

2.94MB400 の1ウェイトを全部読み込んだ合計

124面分割ファイル（@font-face）の数

8.8KB見本文「あいうえお日本語フォントの美しさを比べる。永国東」だけを text= で読んだ量

数値は Google Fonts の CSS（Chrome として取得）が返す woff2 の大きさを、400 に最も近いウェイトで合計した実測値です。

Google Fonts の画面での手順（Webページで使う）

STEP 1

書体のページを開いて「Get font」

fonts.google.com で書体名を検索し、書体のページで「Get font」を押すと、選んだ書体の一覧に入ります。

STEP 2

「Get embed code」でコードを表示

一覧の画面で「Get embed code」を押すと、head に貼る link のコードと、CSS の指定例が出ます。Noto Sans JP の場合は次のとおりでした（2026-10-05 確認）。

<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@100..900&display=swap" rel="stylesheet">

STEP 3

CSS で書体名を指定

文字に当てたい要素に font-family: "Noto Sans JP", sans-serif; のように書きます。書体名の後ろの sans-serif は、フォントを読み込めなかったときに使う書体の種類です。

日本語フォントが重い理由と、軽くする方法

日本語フォントは字の数が多く、漢字を収録する書体では 400 の1ウェイトを全部読み込むと中央値で2.41MBになります。Google Fonts はこれを中央値で122面（@font-face）の分割ファイルに分け、それぞれの @font-face に unicode-range（そのファイルが受け持つ字の範囲）を書いています。ブラウザは、ページで使う字を含むファイルだけを読み込みます。

If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

訳：ページがこの範囲の字を1つも使わなければ、そのフォントはダウンロードされない。1字でも使えば、そのフォント全体がダウンロードされる。
出典：MDN Web Docs「unicode-range」（2026-04-20 更新版）

使う字が決まっているなら、text= でその字だけのファイルを作らせると、さらに小さくなります。見本文「あいうえお日本語フォントの美しさを比べる。永国東」だけを読み込んだ量は中央値で5.9KB、1ウェイトを全部読み込んだ量に対して中央値で0.26%でした。

In some cases, this can reduce the size of the font file by up to 90%. … Please note that the 'text=' parameter can only be specified once.

訳：場合によっては、フォントファイルの大きさを最大90%減らせる。…text= は1回しか指定できない。
出典：Google Fonts「CSS API v2」（2024-07-23 更新版）

text= の値は URL エンコードします（上のコード生成では自動で行います）。表示する字が決まっていない入力欄や本文には向きません。

PC にインストールする（Windows・Mac）

Google Fonts の書体のページで「Get font」→ 一覧の画面で「Download all」を押すと、フォントファイルが zip でダウンロードされます。展開してから、次の手順でインストールします。

Windows

「フォントファイルが圧縮されている場合は、.zip フォルダーを右クリックして解凍し、[抽出] を選択します。」
「目的のフォントを右クリックし、[インストール] を選択します。」
「プログラムがコンピューターに変更を加えることを許可するように求められたら、フォントのソースを信頼する場合は、[はい] をクリックします。」

出典：Microsoft サポート「フォントを追加する」（2026-10-05 確認）

Mac

「Finderでフォントファイルをダブルクリックし、表示されるダイアログで「インストール」をクリックします。」

出典：Apple「Font Book ユーザガイド」（2026-10-05 確認）

ライセンス — Webページ・PDF・ロゴで使えるか

68書体のうち66ファミリーが SIL Open Font License 1.1（OFL）、2ファミリー（Kosugi Maru・Kosugi）が Apache License 2.0 です。OFL の公式 FAQ は、よくある使い方について次のように答えています。

Can I make webpages using these fonts? — Yes! Go ahead! You could ask visitors to download and install the fonts, but loading the fonts dynamically as webfonts through CSS @font-face declarations is a much better method.

訳：これらのフォントで Webページを作れるか — はい。訪問者にフォントのインストールを頼むこともできるが、CSS の @font-face で Webフォントとして読み込むほうがずっとよい方法だ。
出典：OFL-FAQ（1.1-update7）設問 2.1（2026-10-05 確認）

So can I embed OFL fonts in my document? — Yes, either in full or a subset. The restrictions regarding font modification and redistribution do not apply, as the font is not intended for use outside the document.

訳：文書に OFL のフォントを埋め込めるか — はい。全体でも一部（サブセット）でもよい。フォントは文書の外で使うものではないので、改変・再配布の制限は適用されない。
出典：OFL-FAQ（1.1-update7）設問 1.12（2026-10-05 確認）

Can I use the fonts for a book or other print publication, to create logos or other graphics or even to manufacture objects based on their outlines? — Yes. You are very welcome to do so. Authors of fonts released under the OFL allow you to use their font software as such for any kind of design work. No additional license or permission is required, unlike with some other licenses.

訳：本などの印刷物、ロゴやグラフィック、さらに字の輪郭をもとにした物の製作に使えるか — はい、歓迎する。OFL で公開したフォントの作者は、どんなデザインの仕事にも使うことを認めている。ほかの一部のライセンスと違い、追加のライセンスや許可は要らない。
出典：OFL-FAQ（1.1-update7）設問 1.1（2026-10-05 確認）

Apache License 2.0 の書体を再配布するときは、ライセンスの写しを添えることが条件の1つです。各書体の著作権表示とライセンス本文は、個別ページのある書体はそのページ（一覧から）、それ以外は Google Fonts の書体ページ（トップの見本にある「Google Fonts」ボタン）の License の項で確認できます。

デザイン書籍を読み放題・聴き放題でPR

タイポグラフィやフォント選びの参考書は、Amazonの定額サービスで対象タイトルを追加料金なしで読んだり聴いたりできます。

Kindle Unlimited 対象のデザイン書が読み放題・30日無料 → Audible 対象の本を聴き放題・30日無料体験 → Amazon Prime Prime Reading・配送特典つき → Amazon Music Unlimited 作業用BGMを聴き放題・30日無料体験 →

※ Amazonのアソシエイトとして適格販売により収入を得ています。各サービスの無料体験・対象範囲・料金は予告なく変更される場合があります。詳細はAmazonでご確認ください。

よくある質問

Googleフォントの日本語フォントは無料で使えますか？

68書体はどれも、使用・改変・再配布を認めるオープンなライセンスで配布されています（OFL が66ファミリー、Apache License 2.0 が2ファミリー）。Webページで使うのに追加の申請はいらず、手順は上の埋め込みコードを head に貼るだけです。PDF やロゴでの扱いは上のライセンスの節にまとめました。

Webフォントにするとページは重くなりますか？

漢字を収録する書体では、400 の1ウェイトを全部読み込んだ合計の中央値が2.41MBで、分割ファイル（@font-face）は中央値で122面に分かれています。実際に読み込まれる量は使う字の種類で決まり（仕組みは上の重い理由の節）、見出しだけに使うなら text= で使う字だけを読み込むと小さくできます。

text= はどんなときに使えますか？

表示する字があらかじめ決まっている見出しやロゴに向きます。Google Fonts の説明では、text= は1回しか指定できず、値は URL エンコードします。入力欄のように表示する字が決まっていない場所では、text= を付けずに読み込みます。

display=swap は何をしますか？

フォントの読み込みを待つ間、まず別の書体で文字を表示し、読み込めたら差し替えます。MDN は swap を「extremely small block period and an infinite swap period」（文字を隠す時間はごく短く、差し替えは無期限）と説明しています（MDN「font-display」）。

Googleフォント 日本語の使い方・ダウンロード