ホーム > ブログ > HP/ホームページ > 【初心者向け】Googleフォントの導入方法とサイト設定の完全ガイド！

【初心者向け】Googleフォントの導入方法とサイト設定の完全ガイド！

Webサイトのデザインにおいてフォント選びは非常に重要です。
Google Fonts（グーグルフォント）は無料で使えて、SEOや表示速度にも優れたWebフォントとして、多くのサイトで活用されています。

本記事では、Google Fontsの基本から、サイトへの導入方法、CSSの設定、WordPressの利用法、パフォーマンス改善のポイントまで詳しく解説します！

1. Googleフォントとは？

📌 Google Fontsの特徴

✅ 無料で使用可能（商用利用OK）
✅ 豊富なフォント種類（1,500種類以上）
✅ 多言語対応（Notoフォントは日本語も可）
✅ 軽量でWeb最適化されており、SEOにも有利
✅ 簡単にWebサイトに組み込める（HTML & CSS）

📌 代表的なGoogleフォント（おすすめ）

🔹 日本語対応フォント

Noto Sans JP（視認性が高く、シンプルで使いやすい）
M PLUS Rounded 1c（柔らかい印象のデザイン向け）
Zen Kaku Gothic（バランスの良いゴシック体）

🔹 欧文フォント

Roboto（モダンなデザインに最適）
Merriweather（上品でクラシックな雰囲気）
Lobster（特徴的な筆記体でインパクト◎）

2. Googleフォントの導入方法

Google FontsのフォントをWebサイトに導入する方法は、以下の3つがあります。

CDN（Googleのサーバー経由で読み込む） → 最も簡単でおすすめ！
CSS @import を使う
フォントをダウンロードして自前でホスティングする

方法① CDNを使う（最も簡単！）

Google Fontsのサイト（https://fonts.google.com）にアクセス
使いたいフォントを選択
「Embed」タブで <link> タグをコピー
HTMLの <head> 内に貼り付ける

✅ 例：Noto Sans JPを読み込む

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

CSSでフォントを適用する

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

👉 この方法のメリット

最も手軽に導入できる
Googleのサーバー経由で高速に読み込まれる
自動で最適化されるので、ページ速度を落としにくい

方法② `@import` を使う（CDNとほぼ同じだが推奨されない）

HTMLの <head> ではなく、CSSファイル内で読み込む方法です。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

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

🚨 注意：
@import を使うとCSSの読み込みが遅くなるため、CDN方式の方が推奨されます。

方法③ フォントをダウンロードして自前でホスティング

Google Fontsのフォントファイルをダウンロードし、サーバーにアップロードして使う方法です。

✅ 手順

Google Webfonts Helper でフォントをダウンロード
フォントファイル（.woff, .woff2）をサーバーにアップロード
CSSでフォントを適用

✅ 例：自前ホスティング

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
       url('/fonts/NotoSansJP-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

👉 この方法のメリット

サイトの読み込み速度を自分で管理できる
Googleのサーバーに依存しない

🚨 デメリット

手動でファイルを管理する必要がある
CDNよりも初回読み込みが遅くなる可能性

👉 SEO対策と利便性を考えると、通常はCDN方式がおすすめ！

3. WordPressでGoogleフォントを使う方法

WordPressでGoogleフォントを利用する方法は2つあります。

方法① テーマの `functions.php` に追加（推奨）

function add_google_fonts() {
    echo '<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">';
}
add_action('wp_head', 'add_google_fonts');

👉 メリット：テーマの変更時も影響が少なく、管理しやすい！

方法② プラグインを使う（初心者向け）

🔹 おすすめプラグイン：

Easy Google Fonts（設定画面で簡単に変更可能）
OMGF | Host Google Fonts Locally（フォントをローカルに保存してパフォーマンス向上）

4. ページ速度を落とさないための最適化

✅ `display=swap` を必ず使う

フォントの読み込み時に「フォールバックフォント（代替フォント）」をすぐ表示するため、ページ速度を改善できます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

✅ 不要なフォントを削減

フォントのスタイル（太さや斜体など）を最小限にすると、読み込み時間が短縮されます。

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

（すべてのウェイトを読み込むのではなく、400と700だけにする）

5. まとめ：最適なGoogleフォント導入方法

✅ 手軽に使うならCDN（<link> を <head> に追加）
✅ 速度を重視するなら不要なフォントウェイトを削る
✅ WordPressなら functions.php に追加 or プラグインを活用
✅ デザインにこだわるなら @font-face で自前ホスティング

Google Fontsを上手に活用し、サイトのデザインをより魅力的にしましょう！ 🎨✨