ワードプレスのフォント変更方法を初心者向けに解説｜おすすめ設定・見やすい日本語フォント・反映されない時の対処法
はじめに
ワードプレスのフォントは、サイトの印象や読みやすさを大きく左右する重要なデザイン要素です。同じ文章でも、フォントが違うだけで「やわらかい」「信頼感がある」「高級感がある」「少し読みにくい」といった印象が変わります。
特にブログや企業サイトでは、読者がストレスなく本文を読めることが大切です。おしゃれなフォントを選んでも、文字が細すぎたり、行間が狭すぎたりすると、途中で離脱されやすくなります。
ワードプレスでは、テーマ設定、ブロックエディター、プラグイン、追加CSSなど、いくつかの方法でフォントを変更できます。初心者の場合は、まずテーマのカスタマイズ機能から変更するのがおすすめです。より細かく調整したい場合は、追加CSSやGoogle Fontsを使う方法もあります。
この記事では、ワードプレスのフォント変更方法を初心者向けにわかりやすく解説します。おすすめの日本語フォント、フォントサイズや行間の目安、変更が反映されない時の対処法まで紹介するので、自分のサイトに合った見やすいフォント設定を見つけてください。
1. ワードプレスのフォント変更でできること
1-1. フォントを変えるとサイトの印象・読みやすさ・滞在時間が変わる
ワードプレスのフォントを変更すると、サイト全体の雰囲気が大きく変わります。
たとえば、ゴシック体を使うとシンプルで読みやすく、現代的な印象になります。明朝体を使うと、上品で落ち着いた印象になり、コラムや高級感を出したいサイトに向いています。丸みのあるフォントを使うと、親しみやすくやわらかい印象になります。
フォントは見た目だけでなく、読みやすさにも関係します。本文が読みやすいと、読者は記事を最後まで読みやすくなります。結果として、ページの滞在時間が伸びたり、他の記事を読んでもらいやすくなったりする可能性があります。
SEOでは、フォントそのものが直接順位を上げるわけではありません。しかし、読みやすいページは読者の満足度を高めやすく、結果的にサイト全体の評価にも良い影響を与えやすくなります。
1-2. 本文・見出し・メニュー・ボタンなど変更できる主な箇所
ワードプレスでフォントを変更できる主な箇所は、次のような部分です。
本文は、記事や固定ページの文章部分です。読者が最も長く読む場所なので、読みやすさを優先してフォントを選びましょう。
見出しは、H2やH3などの記事内のタイトル部分です。本文より少し太く、目立つフォントにすると、記事の構成がわかりやすくなります。
メニューは、グローバルナビゲーションやフッターメニューなどです。サイト内の移動に関わるため、視認性の高いフォントが向いています。
ボタンは、問い合わせボタンや購入ボタン、資料請求ボタンなどです。文字が読みづらいとクリック率に影響することがあるため、シンプルで見やすいフォントがおすすめです。
そのほか、サイドバー、フッター、ウィジェット、パンくずリスト、表、引用部分などもCSSで細かく変更できます。
1-3. 初心者は「テーマ設定」から変更するのが最も簡単
ワードプレス初心者がフォントを変更する場合は、まずテーマ設定を確認しましょう。
多くのワードプレステーマには、フォントやタイポグラフィを変更する機能があります。管理画面から「外観」→「カスタマイズ」に進むと、フォントやデザインに関する設定項目が用意されている場合があります。
テーマ設定を使うメリットは、コードを書かずに変更できることです。プレビューを見ながら調整できるため、初心者でも失敗しにくい方法です。
ただし、すべてのテーマにフォント変更機能があるわけではありません。テーマによっては、フォントの種類を選べなかったり、本文と見出しを分けて設定できなかったりします。その場合は、プラグインや追加CSSを使って変更します。
1-4. フォント変更前に知っておきたいWebフォントとデバイスフォントの違い
フォント変更をする前に、「Webフォント」と「デバイスフォント」の違いを知っておきましょう。
Webフォントとは、インターネット上からフォントデータを読み込んで表示するフォントです。Google Fontsなどが代表的です。閲覧者のパソコンやスマホにそのフォントが入っていなくても、指定したフォントで表示できます。
一方、デバイスフォントとは、閲覧者の端末に最初から入っているフォントを使う方法です。たとえば、游ゴシック、メイリオ、ヒラギノ角ゴシックなどが代表的です。外部からフォントデータを読み込まないため、表示速度に影響しにくいのが特徴です。
日本語フォントは英数字フォントに比べて文字数が多く、Webフォントを読み込むとページが重くなりやすい傾向があります。そのため、初心者はまずデバイスフォントを中心に設定するのがおすすめです。
2. ワードプレスでフォントを変更する方法は主に4つ
2-1. テーマのカスタマイズ機能で変更する方法
最も簡単なのが、テーマのカスタマイズ機能を使う方法です。
ワードプレス管理画面から「外観」→「カスタマイズ」を開き、「フォント」「タイポグラフィ」「デザイン設定」「サイト基本設定」などの項目を探します。テーマによって名称は異なりますが、フォントサイズやフォントファミリーを変更できる場合があります。
テーマ設定で変更すれば、テーマに合った形でフォントを調整できます。デザインが崩れにくく、初心者にも扱いやすい方法です。
2-2. ブロックエディターで一部の文字だけ変更する方法
ワードプレスのブロックエディターでは、段落や見出しごとに文字サイズや色を変更できます。
たとえば、特定の文章だけ大きくしたい場合や、目立たせたい文章を太字にしたい場合は、ブロックごとの設定で調整できます。
ただし、ブロックエディターだけでサイト全体のフォント種類を統一するのは難しい場合があります。記事ごとに個別設定すると、デザインにばらつきが出やすくなります。
そのため、一部の文字を強調する場合はブロックエディター、サイト全体のフォントを整える場合はテーマ設定やCSSを使う、という使い分けがおすすめです。
2-3. プラグインを使って日本語フォントを追加・変更する方法
プラグインを使うと、コードを書かずにGoogle Fontsや日本語フォントを追加できる場合があります。
フォント変更用のプラグインを導入すれば、管理画面からフォントを選ぶだけで反映できるため、CSSに慣れていない初心者でも使いやすいです。
ただし、プラグインを増やしすぎると、サイトの表示速度や管理のしやすさに影響することがあります。特に日本語Webフォントはデータ量が大きくなりやすいため、必要なフォントだけを使うことが大切です。
2-4. 追加CSSでサイト全体のフォントを変更する方法
追加CSSを使えば、サイト全体のフォントを細かく指定できます。
管理画面から「外観」→「カスタマイズ」→「追加CSS」を開き、CSSコードを入力します。たとえば、本文全体に特定のフォントを指定したり、見出しだけ別のフォントにしたりできます。
CSSを使う方法は自由度が高い反面、書き方を間違えると反映されなかったり、デザインが崩れたりすることがあります。変更前にバックアップを取っておくと安心です。
2-5. Google Fontsを読み込んで好きなフォントを使う方法
Google Fontsを使うと、さまざまなWebフォントをワードプレスに読み込んで使えます。
日本語では、Noto Sans JPやNoto Serif JPなどがよく使われます。シンプルで読みやすく、多くのサイトに合わせやすいフォントです。
Google Fontsを使う方法には、テーマの設定から選ぶ方法、プラグインで設定する方法、CSSやテーマファイルに読み込みコードを追加する方法があります。
ただし、日本語フォントを複数読み込むとサイトが重くなることがあります。本文用と見出し用で多くても1〜2種類に絞るのがおすすめです。
2-6. 初心者におすすめの変更方法と選び方
初心者におすすめの順番は、次の通りです。
まずはテーマ設定で変更できるか確認しましょう。コード不要で安全に変更しやすいからです。
テーマ設定で十分な変更ができない場合は、追加CSSを使います。基本的なコードだけでも、サイト全体のフォントを整えることができます。
CSSが苦手な場合や、Google Fontsを簡単に使いたい場合は、プラグインを検討します。ただし、不要なプラグインを増やさないように注意しましょう。
基本的には、シンプルな日本語フォントを選び、本文は読みやすさ重視、見出しは少し印象を出す程度に調整するのがおすすめです。
3. テーマ設定でワードプレスのフォントを変更する手順
3-1. 管理画面から「外観」→「カスタマイズ」を開く
まず、ワードプレスの管理画面にログインします。
左側メニューから「外観」→「カスタマイズ」をクリックします。すると、サイトのプレビュー画面と設定メニューが表示されます。
テーマによっては、「外観」→「エディター」や、テーマ独自の設定画面からフォントを変更する場合もあります。ブロックテーマを使っている場合は、サイトエディター内でフォントやスタイルを調整できることもあります。
3-2. 「フォント」「タイポグラフィ」「デザイン設定」を探す
カスタマイズ画面を開いたら、フォントに関係する項目を探します。
よくある項目名は、「フォント」「タイポグラフィ」「デザイン設定」「基本デザイン」「サイト基本設定」「本文設定」「見出し設定」などです。
テーマによって表記が違うため、すぐに見つからない場合は、テーマの公式マニュアルで「フォント変更」「タイポグラフィ」などのキーワードを確認しましょう。
3-3. 本文・見出し・メニューごとにフォントを設定する
フォント設定画面が見つかったら、本文、見出し、メニューなどのフォントを設定します。
本文には、読みやすいゴシック体がおすすめです。たとえば、Noto Sans JP、游ゴシック、メイリオ、ヒラギノ角ゴシックなどが使いやすいです。
見出しには、本文と同じフォントを太字で使うか、少し印象のあるフォントを選ぶと統一感が出ます。見出しだけ明朝体にする方法もありますが、サイト全体の雰囲気に合うか確認しましょう。
メニューやボタンは、文字が小さくなりやすいため、細すぎるフォントは避けるのがおすすめです。
3-4. 変更をプレビューして公開する
フォントを変更したら、必ずプレビューで確認しましょう。
確認するポイントは、本文が読みやすいか、見出しが目立っているか、スマホ表示で文字が小さすぎないか、ボタンやメニューの文字が崩れていないかです。
問題がなければ、「公開」ボタンをクリックして変更を反映します。
公開後も、実際のサイトをパソコンとスマホの両方で確認しましょう。管理画面のプレビューでは問題なく見えても、実際のブラウザでは表示が違う場合があります。
3-5. Cocoon・SWELL・Lightningなど主要テーマでの設定例
Cocoon、SWELL、Lightningなどの人気テーマでは、テーマ独自の設定画面やカスタマイズ画面からデザインを調整できます。
Cocoonの場合は、Cocoon設定の中に全体デザインや文字サイズに関する設定があります。フォントそのものを細かく変える場合は、追加CSSを併用するケースもあります。
SWELLでは、カスタマイザーやテーマ設定からサイト全体のデザイン、文字サイズ、見出しデザインなどを調整できます。テーマ側で整ったデザインが用意されているため、初心者でも扱いやすいです。
Lightningでは、カスタマイズ画面やテーマの設定項目から、全体のデザインや見出し、レイアウトを調整できます。ビジネスサイトにも使いやすいテーマなので、読みやすさを重視したフォント設定が向いています。
テーマによって設定場所や変更できる範囲は異なります。見つからない場合は、無理にテーマファイルを編集せず、追加CSSで対応するのが安全です。
4. 追加CSSでワードプレス全体のフォントを変更する方法
4-1. 追加CSSを使う前にバックアップを取る
追加CSSは、ワードプレスのデザインを細かく変更できる便利な機能です。ただし、コードの書き方を間違えると、意図しない表示崩れが起きることがあります。
大きな変更をする前には、現在のCSSをメモ帳などにコピーして保存しておきましょう。可能であれば、バックアッププラグインやサーバーのバックアップ機能を使って、サイト全体のバックアップを取っておくと安心です。
また、テーマファイルを直接編集するよりも、「外観」→「カスタマイズ」→「追加CSS」に書く方が安全です。テーマ更新時に変更が消えにくく、管理もしやすくなります。
4-2. サイト全体のフォントを指定する基本コード
サイト全体のフォントを変更したい場合は、bodyにfont-familyを指定します。
CSSbody {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
このコードでは、最初にNoto Sans JPを指定し、使えない場合はヒラギノ角ゴシック、游ゴシック、メイリオ、最後にsans-serifを表示する設定です。
フォントは左から順番に優先されます。閲覧環境によって使えるフォントが異なるため、複数の候補を指定しておくことが大切です。
Webフォントを読み込んでいない状態で「Noto Sans JP」を指定しても、端末に入っていない場合は表示されません。その場合は、次に指定したフォントが使われます。
4-3. 本文だけフォントを変更するCSS
記事本文だけフォントを変更したい場合は、テーマの構造に合わせて指定します。
一般的には、次のようなCSSを使います。
CSS.entry-content {
font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
テーマによって本文エリアのクラス名は異なります。よく使われるクラス名には、.entry-content、.post-content、.article、.contentなどがあります。
反映されない場合は、ブラウザの検証ツールで本文部分のクラス名を確認しましょう。
4-4. 見出しだけフォントを変更するCSS
見出しだけフォントを変更したい場合は、h1、h2、h3などにfont-familyを指定します。
CSSh1, h2, h3, h4 {
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
この例では、見出しに明朝体を指定しています。本文をゴシック体、見出しを明朝体にすると、上品で落ち着いた印象を出しやすくなります。
ただし、見出しだけフォントを変える場合でも、サイト全体の雰囲気と合っているか確認しましょう。本文と見出しの印象が違いすぎると、統一感がなくなることがあります。
4-5. スマホ表示でも読みやすくするfont-familyの書き方
スマホ表示でも読みやすくするには、フォント指定だけでなく、フォントサイズや行間も調整しましょう。
CSSbody {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
font-size: 16px;
line-height: 1.7;
}
-apple-systemやBlinkMacSystemFontを指定すると、iPhoneやMacなどでシステムフォントが使われやすくなります。システムフォントは表示が速く、端末に最適化されているため、読みやすい表示になりやすいです。
スマホでは画面幅が狭いため、文字が詰まって見えないように行間を少し広めに設定するのがおすすめです。
4-6. CSSで変更しても反映されない時に確認するポイント
追加CSSを書いてもフォントが反映されない場合は、いくつかの原因が考えられます。
まず、ブラウザキャッシュを削除しましょう。古いCSSが残っていると、変更後のデザインが表示されないことがあります。
次に、キャッシュ系プラグインを使っている場合は、プラグインのキャッシュを削除します。サーバー側のキャッシュやCDNを使っている場合も、同じようにクリアが必要です。
また、テーマ側のCSSが優先されている可能性もあります。その場合は、より具体的なセレクタで指定する必要があります。
CSSbody .entry-content {
font-family: "Yu Gothic", "Meiryo", sans-serif;
}
どうしても反映されない場合は、フォント名のスペルミスや、Google Fontsの読み込み忘れも確認しましょう。
5. プラグインでワードプレスのフォントを変更する方法
5-1. フォント変更プラグインを使うメリット・デメリット
プラグインを使うメリットは、コードを書かずにフォントを変更できることです。
CSSに慣れていない初心者でも、管理画面からフォントを選ぶだけで設定できる場合があります。Google Fontsを簡単に読み込めるプラグインもあり、デザインの幅を広げやすいです。
一方で、デメリットもあります。プラグインを増やすと、サイトの表示速度が遅くなったり、他のプラグインやテーマと競合したりする可能性があります。
また、フォント変更だけのためにプラグインを入れると、管理項目が増えて複雑になることもあります。テーマ設定や追加CSSで対応できる場合は、プラグインを使わない方がシンプルです。
5-2. Easy Google FontsでGoogle Fontsを設定する方法
Easy Google Fontsは、Google Fontsをワードプレスで使いやすくするためのプラグインです。
一般的な流れは、プラグインをインストールして有効化し、カスタマイズ画面からフォント設定を行います。見出しや本文などの要素に対して、Google Fontsの中から使いたいフォントを選べる場合があります。
ただし、日本語フォントを使う場合は注意が必要です。英数字フォントに比べて日本語フォントはデータ量が大きくなりやすいため、必要以上に多くのフォントや太さを読み込まないようにしましょう。
本文用に1種類、見出し用に1種類程度に絞ると、デザインと表示速度のバランスを取りやすくなります。
5-3. Japanese Font for WordPressで日本語フォントを追加する方法
日本語フォントに対応したプラグインを使うと、ワードプレスで日本語フォントを設定しやすくなります。
プラグインを有効化した後、設定画面から使いたい日本語フォントを選び、本文や見出しに適用します。テーマによっては、設定がうまく反映されない場合もあるため、プレビューで確認しながら調整しましょう。
日本語フォントを追加する際は、見た目だけでなく表示速度も確認することが大切です。特にブログ記事の本文に重いWebフォントを使うと、ページの読み込みが遅く感じられることがあります。
5-4. ブロックエディターとクラシックエディターでの違い
ブロックエディターでは、段落、見出し、リスト、ボタンなどのブロックごとに文字サイズや色を調整できます。テーマやプラグインによっては、ブロックごとのタイポグラフィ設定が使える場合もあります。
一方、クラシックエディターでは、従来の投稿編集画面で文章全体を編集します。細かいフォント変更をする場合は、HTMLやCSSを使うことが多くなります。
サイト全体のフォントを統一したい場合は、どちらのエディターを使っていても、テーマ設定や追加CSSで管理する方が効率的です。記事ごとに個別設定すると、後から修正するのが大変になります。
5-5. プラグインを増やしすぎると表示速度が遅くなる理由
プラグインを増やしすぎると、サイトの表示速度が遅くなることがあります。
理由は、プラグインごとにCSSやJavaScript、外部ファイルの読み込みが増えることがあるためです。フォント関連のプラグインでは、外部フォントの読み込みが追加されるため、ページ表示に影響する場合があります。
特に日本語Webフォントは、ひらがな、カタカナ、漢字を含むためデータ量が大きくなりやすいです。複数の日本語フォントや太さを読み込むと、表示が遅くなる原因になります。
フォント変更プラグインを使う場合は、本当に必要な機能だけを使い、使っていないプラグインは削除しましょう。
5-6. プラグインを使わずに済むケース
次のような場合は、プラグインを使わなくても十分です。
テーマ設定でフォントを変更できる場合は、まずテーマの機能を使いましょう。テーマに最適化された方法なので、デザインが崩れにくいです。
サイト全体にデバイスフォントを指定するだけなら、追加CSSで対応できます。たとえば、游ゴシックやメイリオを指定するだけなら、外部フォントを読み込む必要はありません。
また、表示速度を重視したい場合も、プラグインやWebフォントを増やさず、システムフォントを使うのがおすすめです。
6. ワードプレスにおすすめの見やすい日本語フォント
6-1. ブログ本文におすすめの日本語フォント
ブログ本文には、長文でも読みやすいフォントが向いています。
おすすめは、Noto Sans JP、游ゴシック、メイリオ、ヒラギノ角ゴシックなどです。どれもクセが少なく、さまざまなジャンルのブログに合わせやすいフォントです。
本文では、個性的すぎるフォントよりも、目が疲れにくいフォントを選びましょう。特にスマホで読む読者が多いサイトでは、文字の形がはっきりしているゴシック体がおすすめです。
6-2. 見出しにおすすめの日本語フォント
見出しには、本文より少し太めで視認性の高いフォントが向いています。
Noto Sans JPの太字、游ゴシックの太字、ヒラギノ角ゴシックなどを使うと、本文との統一感を保ちながら見出しを目立たせることができます。
落ち着いた雰囲気を出したい場合は、Noto Serif JPや游明朝などの明朝体を見出しに使う方法もあります。ただし、明朝体は小さいサイズだと読みにくくなることがあるため、見出しサイズで使うのがおすすめです。
6-3. ビジネスサイトに合う日本語フォント
ビジネスサイトでは、信頼感と読みやすさが重要です。
おすすめは、Noto Sans JP、游ゴシック、ヒラギノ角ゴシック、メイリオなどです。クセが少なく、企業サイト、士業サイト、コーポレートサイト、サービスサイトなどに幅広く使えます。
本文はゴシック体で読みやすくし、見出しは少し太めに設定すると、きちんとした印象になります。
過度に装飾的なフォントや手書き風フォントは、業種によっては信頼感を損なうことがあります。ビジネスサイトでは、まずシンプルで整ったフォントを選びましょう。
6-4. 女性向け・やわらかい印象のサイトに合うフォント
女性向けサイトや、やわらかい印象を出したいサイトでは、丸みのあるゴシック体や細めのフォントが合いやすいです。
たとえば、Noto Sans JPの細めのウェイトや、丸ゴシック系のフォントを使うと、やさしい雰囲気になります。
ただし、本文に細すぎるフォントを使うと、スマホで読みにくくなることがあります。本文は標準の太さにして、見出しや装飾部分だけやわらかい印象のフォントを使うとバランスが取りやすいです。
美容、ライフスタイル、ハンドメイド、子育て、カフェ系のサイトでは、フォントの丸みや余白を意識すると雰囲気を作りやすくなります。
6-5. 高級感・信頼感を出したいサイトに合うフォント
高級感や信頼感を出したい場合は、明朝体をうまく使うのがおすすめです。
Noto Serif JP、游明朝、ヒラギノ明朝などは、上品で落ち着いた印象を出しやすいフォントです。旅館、ホテル、士業、医療、美容、和風サイト、ブランドサイトなどに合いやすいです。
ただし、明朝体を本文全体に使うと、画面サイズや文字サイズによっては読みにくくなる場合があります。長文ブログでは、本文はゴシック体、見出しやキャッチコピーに明朝体を使うと読みやすさと高級感を両立しやすくなります。
6-6. Noto Sans JP・Noto Serif JP・游ゴシック・メイリオの特徴
Noto Sans JPは、シンプルで読みやすいゴシック体です。クセが少なく、ブログ、企業サイト、メディアサイトなど幅広く使えます。Google Fontsでも利用できるため、環境に左右されにくい表示を目指せます。
Noto Serif JPは、上品で落ち着いた印象の明朝体です。見出しやキャッチコピーに使うと、高級感や信頼感を出しやすくなります。
游ゴシックは、WindowsやMacで使われることが多い日本語フォントです。すっきりした印象がありますが、環境によっては少し細く見える場合があります。必要に応じてfont-weightを調整すると読みやすくなります。
メイリオは、Windows環境で読みやすいフォントとしてよく使われます。やや横幅があり、はっきりした表示になりやすいのが特徴です。古い環境も含めて安定した表示を狙いたい場合に使いやすいフォントです。
6-7. 初心者が迷った時に選ぶべき無難なフォント設定
初心者が迷った時は、次のような設定がおすすめです。
CSSbody {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
font-size: 16px;
line-height: 1.7;
}
この設定は、外部フォントを読み込まずに、各端末に入っている読みやすいフォントを優先して表示します。表示速度にも影響しにくく、ブログや企業サイトにも使いやすいです。
Google Fontsを使いたい場合は、Noto Sans JPを本文に使うと無難です。ただし、読み込むフォントの種類や太さは必要最小限にしましょう。
7. フォントサイズ・行間・文字間のおすすめ設定
7-1. 本文のフォントサイズは16px〜18pxが読みやすい
ブログ本文のフォントサイズは、16px〜18pxが読みやすい目安です。
小さすぎる文字は、スマホで読む時にストレスになります。特に40代以上の読者が多いサイトや、専門的な内容を扱うサイトでは、少し大きめの17px〜18pxにするのもおすすめです。
一方で、文字が大きすぎると、1行に表示される文字数が少なくなり、かえって読みづらくなる場合があります。サイトの横幅や行間とのバランスを見ながら調整しましょう。
7-2. 見出しのフォントサイズは階層ごとに差をつける
見出しは、H2、H3、H4などの階層ごとにサイズ差をつけると、記事構成がわかりやすくなります。
たとえば、本文が16pxの場合、H2は24px前後、H3は20px前後、H4は18px前後を目安にするとバランスを取りやすいです。
見出しのサイズが本文とほとんど同じだと、どこが重要なのか分かりにくくなります。逆に大きすぎると、スマホで圧迫感が出ます。
フォントサイズだけでなく、太字、余白、背景色、下線なども組み合わせると、読みやすい見出しになります。
7-3. 行間は1.6〜1.8emを目安にする
本文の行間は、1.6〜1.8emを目安にすると読みやすくなります。
行間が狭いと文字が詰まって見え、長文を読むのがつらくなります。逆に行間が広すぎると、文章のまとまりが分かりにくくなります。
おすすめは、次のような設定です。
CSSbody {
line-height: 1.7;
}
特に日本語の文章は漢字、ひらがな、カタカナが混ざるため、適度な行間があると読みやすくなります。
7-4. 文字間を広げすぎると読みにくくなる
文字間は、広げすぎると読みにくくなります。
おしゃれなデザインを意識してletter-spacingを大きくすると、単語や文章のまとまりが分かりづらくなることがあります。特に本文では、文字間を広げすぎないようにしましょう。
本文の文字間は、基本的に標準のままで問題ありません。調整する場合でも、次のように控えめに設定します。
CSSbody {
letter-spacing: 0.02em;
}
見出しやボタンでは、少し文字間を広げると洗練された印象になることがあります。ただし、読みやすさを優先しましょう。
7-5. PCとスマホでフォントサイズを変えるべきか
PCとスマホでは、画面サイズや読む距離が違うため、フォントサイズを変えることがあります。
スマホでは、本文16px程度を基準にすると読みやすいです。PCでは、サイト幅やデザインによって16px〜18px程度で調整します。
CSSで画面幅に応じて変更する場合は、メディアクエリを使います。
CSSbody {
font-size: 17px;
line-height: 1.7;
}
@media screen and (max-width: 768px) {
body {
font-size: 16px;
line-height: 1.75;
}
}
スマホでは文字サイズを小さくしすぎず、行間を少し広めにすると読みやすくなります。
7-6. SEOよりも読者の読みやすさを優先する
フォント設定で大切なのは、SEOを意識しすぎるよりも、読者の読みやすさを優先することです。
フォントそのものを変えたからといって、検索順位が直接上がるわけではありません。しかし、読みやすいページは読者が離脱しにくく、記事を最後まで読んでもらいやすくなります。
結果として、ユーザー体験が向上し、サイト全体の評価にもつながりやすくなります。
おしゃれなフォントを使うことよりも、読者が迷わず、疲れず、スムーズに読めることを重視しましょう。
8. フォントを変更しても反映されない時の対処法
8-1. ブラウザキャッシュを削除する
フォントを変更したのに反映されない場合、まず確認したいのがブラウザキャッシュです。
ブラウザは、一度読み込んだCSSや画像などを保存して、次回以降の表示を速くする仕組みがあります。そのため、古いCSSが残っていると、変更前のフォントが表示されることがあります。
ChromeやSafariなどのブラウザでキャッシュを削除し、ページを再読み込みしてみましょう。簡単に確認したい場合は、シークレットウィンドウや別のブラウザで開く方法もあります。
8-2. WordPressのキャッシュ系プラグインを確認する
ワードプレスでキャッシュ系プラグインを使っている場合、プラグイン側のキャッシュが原因でフォント変更が反映されないことがあります。
キャッシュ系プラグインの設定画面を開き、「キャッシュ削除」「すべてのキャッシュをクリア」「CSSキャッシュを削除」などの操作を行いましょう。
CSSを圧縮・結合する機能を使っている場合、変更後のCSSが正しく読み込まれないこともあります。一時的にCSS最適化機能をオフにして確認すると、原因を切り分けやすくなります。
8-3. CDNやサーバー側キャッシュをクリアする
CDNやサーバー側キャッシュを使っている場合も、古いファイルが表示されることがあります。
レンタルサーバーによっては、高速化機能としてサーバーキャッシュが用意されています。管理画面からキャッシュを削除できる場合があるので確認しましょう。
CDNを利用している場合は、CDN側のキャッシュもクリアします。ブラウザ、ワードプレス、サーバー、CDNのどこかに古いCSSが残っていると、フォント変更が反映されないことがあります。
8-4. CSSの指定がテーマ側の設定に上書きされていないか確認する
追加CSSを書いても反映されない場合、テーマ側のCSSに上書きされている可能性があります。
CSSは、後から読み込まれたものや、より具体的に指定されたものが優先されます。たとえば、bodyにfont-familyを指定しても、テーマ側で.entry-content pに別のフォントが指定されていると、本文には反映されないことがあります。
その場合は、指定を少し具体的にします。
CSS.entry-content p {
font-family: "Yu Gothic", "Meiryo", sans-serif;
}
それでも反映されない場合は、ブラウザの検証ツールで、どのCSSが優先されているか確認しましょう。
8-5. フォント名のスペルや読み込みコードを確認する
フォント名のスペルが間違っていると、指定したフォントは表示されません。
たとえば、Google Fontsで「Noto Sans JP」を使う場合、CSSのfont-family名も正しく書く必要があります。
CSSbody {
font-family: "Noto Sans JP", sans-serif;
}
フォント名にスペースが含まれる場合は、ダブルクォーテーションで囲むのが基本です。
また、Webフォントを使う場合は、フォントの読み込みコードが正しく設定されているか確認しましょう。読み込みができていない状態でfont-familyだけ指定しても、そのフォントでは表示されません。
8-6. Google Fontsが正しく読み込まれているか確認する
Google Fontsを使う場合は、フォントの読み込みが正しく行われているか確認しましょう。
プラグインで設定している場合は、選択したフォントが保存されているか、対象の要素に適用されているかを確認します。
CSSで読み込む場合は、@importやlinkタグの記述に間違いがないか確認します。
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;
}
ただし、追加CSSの先頭以外に@importを書くと、うまく動作しない場合があります。できれば、テーマの機能やプラグインで読み込む方が管理しやすいです。
8-7. スマホだけ反映されない場合の確認ポイント
スマホだけフォントが反映されない場合は、レスポンシブ用のCSSが影響している可能性があります。
テーマによっては、スマホ表示専用のCSSが用意されており、PCとは別のフォントやサイズが指定されていることがあります。
メディアクエリ内で別のfont-familyが指定されていないか確認しましょう。
CSS@media screen and (max-width: 768px) {
body {
font-family: "Yu Gothic", "Meiryo", sans-serif;
}
}
また、スマホのブラウザキャッシュが残っている場合もあります。スマホ側のブラウザ履歴やキャッシュを削除して確認しましょう。
8-8. どうしても直らない時はテーマ・プラグインの競合を調べる
どうしてもフォント変更が反映されない場合は、テーマやプラグインの競合を疑いましょう。
一時的にキャッシュ系プラグインやCSS最適化プラグインを停止して、反映されるか確認します。それで反映される場合は、プラグインの設定が原因の可能性があります。
また、テーマを変更した直後やアップデート後にフォントが変わらなくなった場合は、テーマ側の仕様が変わった可能性もあります。
本番サイトでいきなり停止するのが不安な場合は、ステージング環境やテストサイトで確認するのがおすすめです。
9. ワードプレスのフォント変更で注意すべきこと
9-1. おしゃれさより読みやすさを優先する
フォントを選ぶ時は、おしゃれさより読みやすさを優先しましょう。
デザイン性の高いフォントは、見出しやロゴには向いていても、長い本文には向かないことがあります。本文が読みにくいと、読者はすぐに離脱してしまいます。
特にブログ記事では、読者が知りたい情報をスムーズに読めることが大切です。装飾的なフォントは使いすぎず、本文にはシンプルなフォントを選びましょう。
9-2. 日本語Webフォントは表示速度に影響しやすい
日本語Webフォントは、表示速度に影響しやすい点に注意が必要です。
日本語は文字数が多いため、フォントデータが大きくなりやすいです。複数の日本語フォントや太さを読み込むと、ページ表示が遅くなる場合があります。
表示速度を重視するなら、デバイスフォントを使うか、Google Fontsの読み込みを最小限にしましょう。本文用と見出し用で1〜2種類に絞るのがおすすめです。
9-3. フォントを使いすぎるとデザインが崩れる
サイト内で多くのフォントを使いすぎると、統一感がなくなります。
本文、見出し、メニュー、ボタンでそれぞれ違うフォントを使うと、デザインがまとまりにくくなります。初心者の場合は、基本的に1種類、多くても2種類に絞りましょう。
たとえば、本文はNoto Sans JP、見出しはNoto Sans JPの太字にするだけでも十分見やすいサイトになります。高級感を出したい場合だけ、見出しにNoto Serif JPを使うなど、目的を決めて選ぶことが大切です。
9-4. 商用利用できるフォントか確認する
フォントを使う時は、商用利用できるか確認しましょう。
無料フォントの中には、個人利用は無料でも商用利用には制限があるものがあります。企業サイト、アフィリエイトブログ、ネットショップ、広告収入のあるサイトなどでは、商用利用の扱いになる可能性があります。
Google FontsのようにWebで使いやすいライセンスのフォントもありますが、利用前には必ずライセンスを確認しましょう。
フォントファイルを自分でアップロードして使う場合も、Webサイトへの埋め込みが許可されているか確認が必要です。
9-5. テーマ更新でカスタマイズが消えないようにする
テーマファイルを直接編集してフォントを変更すると、テーマ更新時にカスタマイズが消えることがあります。
初心者は、テーマファイルを直接編集するのではなく、追加CSSや子テーマを使うのがおすすめです。
追加CSSに書いた内容は、テーマ更新の影響を受けにくく、管理画面から簡単に修正できます。より本格的にカスタマイズする場合は、子テーマを作成してCSSを管理しましょう。
9-6. アクセシビリティを考えて小さすぎる文字を避ける
フォント設定では、アクセシビリティも意識しましょう。
小さすぎる文字、細すぎる文字、背景とのコントラストが弱い文字は、読みにくくなります。年齢や視力、利用環境に関係なく、多くの人が読みやすいサイトを目指すことが大切です。
本文は16px以上を目安にし、行間を適度に取りましょう。薄いグレーの文字を使う場合は、背景とのコントラストが十分か確認してください。
見た目の美しさだけでなく、誰にとっても読みやすいデザインにすることが、結果的にサイトの信頼性にもつながります。
10. ワードプレスのフォント変更に関するよくある質問
10-1. ワードプレスの初期フォントは何ですか？
ワードプレスの初期フォントは、使用しているテーマによって異なります。
ワードプレス本体で決まっているというより、テーマのCSSで指定されているフォントが表示されます。テーマによっては、システムフォント、游ゴシック、メイリオ、Noto Sans JPなどが指定されていることがあります。
確認したい場合は、ブラウザの検証ツールで本文のfont-familyを確認しましょう。
10-2. フォント変更はSEOに影響しますか？
フォントを変更しただけで、検索順位が直接上がるわけではありません。
ただし、読みやすいフォントにすることで、読者が記事を読みやすくなり、離脱を防ぎやすくなります。ページの使いやすさや読者満足度が高まれば、結果的にSEOにも良い影響を与える可能性があります。
SEOのために特殊なフォントを使うのではなく、読者が快適に読めるフォントを選ぶことが大切です。
10-3. Google Fontsは無料で使えますか？
Google Fontsは無料で利用できます。
ただし、フォントごとにライセンスがあるため、実際に使う前に利用条件を確認することをおすすめします。商用サイトで使う場合も、フォントのライセンスを確認しておくと安心です。
ワードプレスでGoogle Fontsを使う場合は、テーマ設定、プラグイン、CSSなどで読み込む方法があります。
10-4. 日本語フォントを使うとサイトは重くなりますか？
日本語Webフォントを使うと、サイトが重くなる場合があります。
日本語は文字数が多いため、フォントデータが大きくなりやすいからです。特に複数のフォントや太さを読み込むと、表示速度に影響しやすくなります。
表示速度を重視するなら、デバイスフォントを使うか、Webフォントの種類と太さを必要最小限にしましょう。
10-5. スマホだけフォントを変えることはできますか？
スマホだけフォントを変えることはできます。
CSSのメディアクエリを使えば、画面幅に応じてフォントを変更できます。
CSS@media screen and (max-width: 768px) {
body {
font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
}
ただし、PCとスマホでフォントが大きく変わると、サイトの印象にばらつきが出ることがあります。基本的には同じ系統のフォントを使い、サイズや行間で調整するのがおすすめです。
10-6. 一部の文字だけフォントを変更できますか？
一部の文字だけフォントを変更することも可能です。
ブロックエディターで文字サイズや装飾を変える方法もありますし、HTMLとCSSで特定の文字だけフォントを指定する方法もあります。
たとえば、特定の文章にクラスを付けてCSSを指定します。
HTML<span class="special-font">この文字だけフォントを変更します</span>
CSS.special-font {
font-family: "Noto Serif JP", serif;
}
ただし、一部だけフォントを変えすぎるとデザインが散らかって見えるため、強調したい場所に限定して使いましょう。
10-7. プラグインとCSSはどちらがおすすめですか？
初心者でコードを書きたくない場合は、プラグインやテーマ設定がおすすめです。
一方で、サイトを軽く保ちたい場合や、細かく調整したい場合は、追加CSSの方が向いています。
おすすめの順番は、まずテーマ設定で変更できるか確認し、次に追加CSSを試し、それでも難しい場合にプラグインを使う流れです。
フォント変更だけのためにプラグインを増やすと管理が複雑になることがあるため、できるだけシンプルな方法を選びましょう。
まとめ
ワードプレスのフォント変更は、サイトの印象や読みやすさを整えるうえでとても重要です。
初心者は、まずテーマ設定からフォントを変更するのがおすすめです。コードを書かずに変更でき、プレビューを見ながら調整できます。テーマにフォント変更機能がない場合は、追加CSSやプラグインを使うと、サイト全体のフォントを変更できます。
本文には、Noto Sans JP、游ゴシック、メイリオ、ヒラギノ角ゴシックなど、読みやすい日本語フォントが向いています。見出しには、本文と同じフォントの太字を使うか、Noto Serif JPなどの明朝体を使うと印象を出しやすくなります。
フォントサイズは本文16px〜18px、行間は1.6〜1.8emを目安にすると読みやすいです。おしゃれさを優先しすぎず、読者がストレスなく読めることを第一に考えましょう。
フォントを変更しても反映されない場合は、ブラウザキャッシュ、ワードプレスのキャッシュプラグイン、サーバーキャッシュ、CSSの優先順位、フォント名のスペル、Google Fontsの読み込み設定を確認してください。
ワードプレスのフォント設定は、少し変えるだけでもサイト全体の印象が大きく変わります。まずは無難で読みやすいフォントから始めて、サイトの目的や読者に合わせて少しずつ調整していきましょう。