WebサイトにGoogleフォントを使う場合もダウンロードは必要ですか？

Webサイトで使うだけならフォントファイルのダウンロードは不要です。Googleフォントが発行するタグをHTMLのに貼り、CSSでfont-familyを指定するだけで、訪問者のブラウザがGoogleのサーバーからフォントを読み込みます。

Googleフォント日本語ダウンロード方法【2026】Webフォント導入手順も解説

使い方は2通り — まず目的を決める

Googleフォントの日本語フォントには、大きく分けて2つの使い方があります。目的によってダウンロードの要・不要が変わります。

① Webサイトで使う（Webフォント埋め込み）→ ダウンロード不要

自分のWebサイト・ブログ・LPの文字に使う場合は、フォントファイルのダウンロードは不要です。GoogleフォントのコードをHTMLに貼るだけで、訪問者のブラウザが自動でフォントを読み込みます。手順は下の「Webフォント導入4ステップ」へ。

② PCソフト（Word・Photoshop・Canva等）で使う → ダウンロードしてインストール

チラシ・資料・画像デザインなどPC上のソフトで使う場合は、フォントファイルをダウンロードしてPCにインストールします。手順は下の「ダウンロード＆インストール手順」へ。

Webフォント導入 4ステップ

HTML/CSSで自分のサイトにGoogleフォントを適用する手順です。ここではNoto Sans JPを例にします。

STEP 1

フォントを選ぶ

fonts.google.com を開き、言語フィルタで「Japanese」を選ぶと日本語対応フォントだけを絞り込めます。使いたいフォント（例：Noto Sans JP）をクリックして詳細ページを開きます。

STEP 2

ウェイトを選んで埋め込みコードを取得

フォントページで使いたいウェイト（太さ）の「+」を押して選びます。右上の「Get font」→「Get embed code」を開くと、<link> 形式の埋め込みコードが表示されます。使うウェイトだけ選ぶと表示が軽くなります。

STEP 3

HTMLの <head> に貼り付ける

取得した <link> タグを、HTMLの <head> 〜 </head> の間に貼り付けます。

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

STEP 4

CSSで font-family を指定

あとはCSSで font-family にフォント名を指定するだけで適用されます。フォント名はGoogleフォントの指定どおり（前後をシングルクォートで囲む）にします。

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

💡 display=swap を付けると、フォント読み込み中も代替フォントで先に文字が表示され、画面が真っ白になる時間を防げます（CLS対策）。

ダウンロード＆インストール手順（PCソフト用）

Word・PowerPoint・Photoshop・Illustrator・Canva（デスクトップ版）などPC上のソフトでフォントを使う場合の手順です。

STEP 1

zipでダウンロード

フォントページ右上の「Get font」→「Download all」を押すと、フォントファイル一式がzip形式でダウンロードされます。

STEP 2

zipを解凍

ダウンロードしたzipを右クリック→「すべて展開」（Macはダブルクリック）で解凍します。中に .ttf または .otf ファイルが入っています。

STEP 3

インストール

フォントファイル（.ttf / .otf）をダブルクリックし、表示される画面で「インストール」を押します。Windowsはフォントファイルを右クリック→「インストール」でもOK。インストール後、ソフトを再起動するとフォント一覧に表示されます。

⚠️ 商用利用について： Googleフォントの多くはSIL Open Font License（OFL）で、商用利用・改変・配布物への埋め込みが可能です。ただし「フォントファイル単体を販売する」ことは禁止されています。利用前に各フォントの公式ライセンスを確認してください。

使う前にフォントを見比べる

あなたのテキストを入力して、各日本語フォントの見え方をその場で比較できます。ダウンロード前のチェックに。

フォントをプレビューする →

どのフォントをダウンロードすればいい？

用途別のおすすめは別ページで解説しています。迷ったら本文・UIに万能な Noto Sans JP、和風ならしっぽり明朝、親しみやすい丸ゴシックなら Zen Maru Gothic が定番です。

› 日本語フォントおすすめ【用途別】を見る

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

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

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

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

よくある質問

Googleフォントのダウンロードは無料ですか？商用利用できますか？

Googleフォントは無料でダウンロードでき、ほとんどがSIL Open Font License（OFL）で提供されているため商用利用も可能です。Webフォントとしての埋め込み・フォントファイルの配布物への埋め込みも基本的に許可されています。ただし「フォントファイル単体を販売する」ことは禁止されています。利用前に各フォントのライセンスを確認してください。

フォントファイルをダウンロードする方法は？

fonts.google.com で目的のフォントページを開き、右上の「Get font」→「Download all」をクリックするとzipでダウンロードできます。解凍して出てくる.ttfまたは.otfファイルをダブルクリックし、「インストール」を押すとPCにインストールされ、WordやPhotoshop等のデザインソフトで使えるようになります。

Webサイトに使う場合もダウンロードは必要ですか？

Webサイトで使うだけならフォントファイルのダウンロードは不要です。Googleフォントが発行する<link>タグをHTMLの<head>に貼り、CSSでfont-familyを指定するだけで、訪問者のブラウザがGoogleのサーバーからフォントを読み込みます。

日本語のWebフォントは表示が重くなりませんか？

日本語フォントは収録文字数が多くファイルサイズが大きいため、欧文フォントより読み込みは重くなりがちです。Googleフォントは表示する文字だけを動的に配信する仕組み（サブセット）を備えているため、実際の転送量は抑えられます。さらにdisplay=swapの指定や、必要なウェイトだけを選ぶことで体感速度を改善できます。

Googleフォント 日本語 ダウンロード方法