PR

WordPressのGoogleフォントの使い方&プラグインをご紹介!

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

WordPressのフォントを変えたいけれど、どのプラグインを入れればいいのか分からない、そもそもGoogleフォントの設定方法がよく分からない、という人はかなり多いと思います。

この記事では、次のようなことが分かります。

  • 自分のサイトに合ったWordPressのGoogleフォント用プラグインの選び方
  • プラグイン・Font Library・CSS手動、それぞれの具体的な使い方の流れ
  • 日本語サイト向けのおすすめGoogleフォントと選び方
  • 表示速度やプライバシーにも配慮した、安全なフォントの使い方

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

WordPressのGoogleフォントの使い方と効果

ごとう
ごとう

ここでは、そもそもWordPressでGoogleフォントを使うとどんなメリットがあるのか、そして設定方法の大まかな全体像を先に整理しておきます。

フォントを変えるとサイトはどう変わる?

私自身、フォントを変えただけで「同じレイアウトなのに別のサイトみたい」と言われたことがあります。フォントはそれくらい印象を左右するパーツです。

フォントを変えると、主に次のような変化があります。

  • 第一印象がガラッと変わる(やわらかい・カチッとした・かわいい などの雰囲気づくりがしやすくなる)
  • 読みやすさが上がり、スクロールして読まれやすくなる
  • ブランドイメージとトーンがそろう(BtoB向け・女性向け・子ども向けなど)
  • 行間や文字の形が整い、結果的にアクセシビリティも向上しやすい

逆に、本文に装飾の強いフォントを使ったり、見出しと本文でチグハグなフォントを混ぜたりすると、「なんとなく読みにくい」「安っぽく見える」といったマイナスの印象につながってしまいます。

WordPressでGoogleフォントを使う基本の3パターン

WordPressでGoogleフォントを読み込む方法は、ざっくり次の3パターンです。

  • プラグインで設定する(Easy Google FontsやFonts Pluginなどを使う)
  • Font Library(サイトエディターの機能)でローカルフォントとして追加する
  • CSSやfunctions.phpを編集して、手動でフォントを読み込む

この3つの選択肢を知っておくと、「自分はどの方法を選ぶべきか」「どこまでやるか」の判断がとても楽になります。

WordPressでGoogleフォントをプラグインで使う全体像

ごとう
ごとう

ここからは、WordPressでGoogleフォントをプラグインで使うときの全体像と、代表的なプラグインの違いを整理していきます。

代表的なWordPressのGoogleフォントプラグイン比較

まずは、よく名前が挙がるGoogleフォント系プラグインを、特徴ごとに比べてみます。

プラグイン名 主な特徴 難易度 向いている人
Fonts Plugin カスタマイザー画面からGoogleフォントやAdobe Fontsをリアルタイムでプレビューしながら適用できる。対応フォントが多く、操作も直感的。 かんたん とにかく簡単に、見出しや本文のフォントを変えたい人
Easy Google Fonts カスタマイザーと連携し、コードを書かずに段落や見出しごとにフォントを割り当てられる定番プラグイン。クラシックテーマとも相性が良い。 かんたん クラシックテーマを使いつつ、柔軟にフォントを変えたい人
OMGF / Local Google Fonts系 既に読み込まれているGoogleフォントを検出し、ローカルに保存して配信できる。表示速度やプライバシーの対策に役立つ。 ふつう プライバシーや速度をしっかり意識したい人
Custom Fontsなど Googleフォント以外に、自作フォントや購入フォントをアップロードして使えるタイプのプラグイン。 ふつう ロゴ用フォントなど、オリジナルフォントも使いたい人

私のおすすめは、「まずFonts PluginかEasy Google Fontsで見た目を整える」「必要に応じてOMGFなどでローカルホスティングに切り替える」という二段構えです。

プラグインでGoogleフォントを使うときの流れ

プラグインごとの細かい画面は違いますが、Googleフォントを使うときの流れはほぼ共通しています。

  • WordPress管理画面で「プラグイン」→「新規追加」から目的のプラグイン名を検索する
  • インストールして有効化する
  • 「外観」→「カスタマイズ」や、プラグイン独自の設定画面を開く
  • 「フォント」「Typography」などのメニューから、本文や見出しのフォントを選ぶ
  • プレビューで確認し、問題なければ「公開」や「保存」をクリックする

たとえばEasy Google Fontsなら、カスタマイザーの中に追加される「Typography」の設定から、段落や見出し(H1〜H6)ごとにフォントファミリーや太さを選んでいくイメージです。

プラグイン選びで失敗しない3つのポイント

Googleフォント関連のプラグインは数が多いので、選ぶときの基準を決めておくと迷いにくくなります。

  • 自分のテーマと相性が良いか(カスタマイザー対応なのか、ブロックテーマ対応なのか)
  • 日本語フォントをしっかり扱えるか(ゴシック体や明朝体など、使いたい書体が揃っているか)
  • ローカルホスティングや速度対策がしやすい設計になっているか(外部CDNのみの読み込みになっていないか)

特に注意したいのが、「すでにテーマや他のプラグインがGoogleフォントを読み込んでいないか」です。どのプラグインがどのフォントを読み込んでいるのか、一度整理してから導入するとトラブルを減らせます。

WordPressのGoogleフォントの使い方:おすすめフォントと選び方

ごとう
ごとう

ここからは、WordPressでGoogleフォントを使うときに「どのフォントを選ぶか」という視点に絞って、具体的な考え方をお伝えします。

用途別・Googleフォントの選び方

フォント選びで迷ったときは、「誰に向けたサイトか」「どんな印象を与えたいか」を軸に考えると決めやすくなります。

用途・ターゲット おすすめ傾向 ねらいたい印象
BtoBサイト・士業・コーポレート 細めのサンセリフ(ゴシック系)や落ち着いた明朝系 信頼感・きちんとしている雰囲気
個人ブログ・雑記ブログ 読みやすいサンセリフや、癖の少ないゴシック体 読みやすさ・親しみやすさ
女性向けメディア・美容系 角が柔らかい丸ゴシックや、少し細めのサンセリフ やわらかさ・上品さ
キッズ・教育系 手書き風フォントや、太めで丸いゴシック体 楽しさ・元気さ
LP・セールスページの見出し 太字のサンセリフや、装飾のあるディスプレイ系 インパクト・メリハリ

本文は「読みやすさ」が最優先なので、派手なフォントは基本的に見出し用に回し、本文は標準的なゴシックや明朝で整えるくらいがちょうどいいと感じています。

日本語サイトで気をつけたいポイント

Google Fontsはもともと欧文フォントが中心ですが、日本語フォントも複数提供されています。日本語サイトで使うときには、次のようなポイントを意識してみてください。

  • 本文用には、表示が重くなりにくいシンプルなゴシック体を選ぶ
  • 見出しだけ、少し個性のあるフォントに変えてメリハリをつける
  • 英数字だけ別フォントにする場合は、日本語と組み合わせたときのバランスを見る
  • ウェイト(太さ)は必要なものだけに絞り、読み込む種類を増やしすぎない

体感としては、「本文は無難、見出しで少し遊ぶ」くらいのバランスだと、多くのサイトでうまくまとまりやすいです。

WordPressでGoogleフォントをプラグイン以外で使うときの注意点

ごとう
ごとう

ここでは、プラグイン以外の方法でGoogleフォントを使う場合の考え方や注意点を解説します。Font LibraryやCSS手動の使い方を知っておくと、選択肢の幅が広がります。

方法別のメリット・デメリットまとめ

まず、方法ごとの特徴をざっくり表にまとめます。

方法 メリット デメリット 向いているケース
プラグイン ノーコードで設定でき、プレビューも簡単。導入までのステップが少ない。 プラグインが増えると、管理やパフォーマンスに影響する可能性がある。 テーマを問わず、まずは楽にフォントを変えてみたいとき。
Font Library ブロックテーマなら、テーマのスタイルと一体的に管理できる。ローカルホスティングもしやすい。 ブロックテーマ前提の機能で、使えるテーマが限られる。 ブロックテーマを使っていて、長期的に同じテーマを使い続ける予定のとき。
手動(CSSなど) 余計なプラグインなしで、細かい挙動まで自由に制御できる。 HTMLやCSSの知識が必要で、テーマ更新時のメンテナンスも発生しやすい。 制作会社やエンジニア寄りで、細かくチューニングしたいとき。

自分のスキルや、サイト運営にかけられる時間と相談しながら、どの方法が一番現実的かを選ぶと良いと思います。

Font LibraryでGoogleフォントをローカル追加するイメージ

ブロックテーマを使っている場合は、サイトエディターの「Font Library」からGoogleフォントをインストールし、ローカルフォントとして扱えます。

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

大まかな流れは次のようなイメージです。

  • 「外観」→「エディター」からサイトエディターを開く
  • スタイルやタイポグラフィのメニューを開き、フォントの管理画面を表示する
  • 「フォントを追加」や「Google Fontsから追加」といったボタンをクリックする
  • 使いたいフォント名で検索し、インストールする
  • 見出しや本文などに、インストールしたフォントを割り当てる

Font Libraryで追加したフォントは、基本的に自分のサーバー側で配信される形になるため、外部サーバーへのリクエストを減らしやすく、プライバシー面でも安心しやすい使い方です。

CSSで手動設定するときの考え方

手動でGoogleフォントを設定する場合、主に次の2パターンがあります。

  • Google Fontsのスタイルシートをリンクタグや@importで読み込む
  • Google Fontsからフォントファイルをダウンロードし、自分のサーバーにアップして@font-faceで指定する

どちらにしても、最終的には「どのセレクタに対して」「どのフォントファミリーを使うか」をCSSで指定していきます。

制作案件などでWordPressを使っている場合は、この方法が一番自由度が高いです。ただ、個人ブログや小規模サイトでは、WordPressのGoogleフォントプラグインやFont Libraryを使ったほうが、後々の管理はかなり楽になります。

WordPressのGoogleフォントの使い方:テーマ別おすすめ設定

ごとう
ごとう

ここでは、テーマのタイプ別に「どのWordPressのGoogleフォントの使い方を選ぶと楽か」を整理します。自分のテーマがどちらのタイプか、まず確認してみてください。

テーマタイプ別おすすめルート

ブロックテーマなのかクラシックテーマなのかで、向いている方法が少し変わってきます。

テーマタイプ 見分け方の目安 おすすめのGoogleフォント設定方法
ブロックテーマ(フルサイト編集対応) 「外観」メニューに「エディター」があり、サイト全体をブロックで編集できる。 Font LibraryでGoogleフォントを追加し、テーマのスタイルから一括設定する。
クラシックテーマ(従来型) 「外観」メニューの中心が「カスタマイズ」で、従来のウィジェットやメニューがメイン。 Fonts PluginやEasy Google Fontsでフォントを変え、必要ならOMGFなどでローカル化する。
独自フレームワーク系テーマ テーマ独自の「デザイン設定」「タイポグラフィ」などの画面が用意されている。 まずテーマ標準のフォント機能を使い、それで足りない部分だけプラグインやCSSで補う。

「絶対にGoogleフォントを使わなければいけない」というよりも、テーマ標準の機能とプラグインやFont Libraryを組み合わせて、「一番シンプルに管理できるルート」を選ぶのがおすすめです。

実際の設定パターン例

もう少しイメージしやすいように、現実的な組み合わせ例も挙げておきます。

  • ブロックテーマ+Font Library
    → Font Libraryで見出し用と本文用のフォントを追加し、スタイルから一括で設定する。
  • クラシックテーマ+Easy Google Fonts
    → カスタマイザーのTypographyで本文と見出しのフォントを変え、必要ならOMGFでローカル化する。
  • デザインに強くこだわる制作案件
    → Google Fontsからフォントをダウンロードし、自前ホスティング+CSSで細かく制御する。

いきなり難しい方法を選ぶより、「自分が一番迷わずに運用できる方法」から試していくのが、結果的には近道だと思います。

WordPressでGoogleフォントをプラグイン導入したのに反映されないとき

ごとう
ごとう

ここでは、「WordPressのGoogleフォント用プラグインを入れたのに、なぜか見た目が変わらない」というときにチェックしたいポイントをまとめます。

よくあるトラブルと原因・対処まとめ

ありがちなトラブルを、原因とあわせて整理してみます。

症状 よくある原因 対処のヒント
プレビューでは変わっているのに、本番画面で変わらない キャッシュプラグインやブラウザキャッシュが効いている。 キャッシュをクリアし、シークレットウィンドウや別のブラウザで確認する。
一部のページだけフォントが変わっていない 別のCSS(テーマや他プラグイン)が、特定のページでフォントを上書きしている。 該当ページのHTML構造を確認し、セレクタの指定や優先順位を見直す。
日本語部分だけフォントが変わっていない 選んだフォントが日本語に対応していない、もしくはサブセットの設定が違う。 日本語対応のフォントを選び直し、フォールバックに別の日本語フォントを指定する。
フォントの選択肢に使いたいフォントが出てこない プラグインがそのフォントに対応していない、もしくはFont Libraryにまだ追加していない。 別のプラグインやFont Libraryでの追加を検討する。

特に「日本語だけ変わらない」というケースは本当によくあるので、まずは日本語対応フォントを選べているか、フォールバックの指定が適切かを確認してみてください。

それでもダメなときに見るべきポイント

原因がどうしても分からないときは、次のような点もチェックしてみてください。

  • ブラウザの開発者ツールで、該当箇所に最終的にどのフォントが適用されているかを確認する
  • ネットワークのタブで、Googleフォントやローカルフォントの読み込みがエラーになっていないかを見る
  • テーマやプラグインのアップデートによって、設定がリセットされていないかをチェックする

ここまで確認すると、「そもそもフォントが読み込まれていないのか」「読み込まれているけれど別のスタイルに上書きされているのか」が切り分けやすくなります。

よくある質問:WordPressのGoogleフォントの使い方Q&A

ごとう
ごとう

最後に、WordPressでGoogleフォントを使うときによく聞かれる質問に、Q&A形式で答えていきます。

Q1. WordPressのGoogleフォントプラグインは入れすぎると良くないですか?

A. フォント関連のプラグインは、基本的に一つか多くても二つまでにしておくのがおすすめです。

Googleフォントを読み込むプラグインがいくつも入っていると、次のような問題が起きやすくなります。

  • 同じフォントを二重に読み込んでしまい、無駄な通信が増える
  • どのプラグインの設定が最終的に優先されているのか分かりにくくなる

目安としては、見た目を変える用にFonts PluginかEasy Google Fontsを一つ、必要であればローカルホスティング用にOMGFなどを一つ、という組み合わせが管理しやすいと思います。

Q2. WordPressでGoogleフォントを使う方法で、一番カンタンなのはどれですか?

A. 一番手軽なのは、ブロックテーマを使っていて、Font LibraryからGoogleフォントを追加するパターンだと感じています。

理由はシンプルで、次のようなメリットがあるからです。

  • プラグインを増やさずに完結できる
  • テーマと同じ画面でフォントを一元管理できる
  • ローカルホスティング前提の設定にしやすく、プライバシー面でも安心しやすい

クラシックテーマの場合は、Fonts PluginかEasy Google Fontsが、ほぼクリック操作だけでフォントを変えられるので、初めての方にも向いています。

Q3. 表示速度やSEOを考えると、Googleフォントは使わないほうがいいですか?

A. 必ずしも「使わないほうがいい」というわけではありませんが、使い方には工夫が必要です。

Googleフォントは外部サーバーからフォントを読み込むため、そのまま使うとリクエストが増え、表示速度に影響する可能性があります。また、プライバシーや法規制の観点から、外部のフォント配信サービスをそのまま呼び出すことに慎重なサイト運営者も増えています。

対策としては、次のような方法があります。

  • Font LibraryやOMGF、Local Google Fontsなどでローカルホスティングに切り替える
  • 使うウェイト(太さ)を最低限に絞り、読み込むフォントファイルを減らす
  • 本文にはできるだけ軽いフォントを使い、重いフォントは見出しだけに限定する

こうした工夫をしておけば、Googleフォントを使いながらでも、実用的な表示速度とSEOのバランスをとりやすくなります。

まとめ:WordPressのGoogleフォントの使い方と今日からできる一歩

この記事のポイントを振り返ります

  • WordPressでGoogleフォントを使う方法は、「プラグイン」「Font Library」「CSS手動」の3つが基本
  • Googleフォントプラグインは、Fonts PluginやEasy Google Fontsが定番で、まずはここから試すと迷いにくい
  • ブロックテーマならFont Libraryでフォントを追加し、ローカルホスティング前提で使うとシンプルかつ安全
  • 日本語サイトでは「本文は読みやすさ重視」「見出しで個性を出す」くらいがちょうどいいバランス
  • 表示速度やプライバシーを意識するなら、ローカルホスティング系プラグインやFont Libraryを活用する

今日から取るべき最初の一歩としては、まず自分のサイトが「ブロックテーマ」か「クラシックテーマ」かを確認し、そのうえでFont Library、Fonts Plugin、Easy Google Fontsなどの中から、自分にとって一番シンプルなルートを一つ決めてみてください。

そこまで決まれば、あとは実際に1〜2種類のフォントを試しながら、自分のサイトにしっくりくるWordPressでのGoogleフォントの使い方を見つけていくだけです。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a