WordPressでフォントを変更する３つの方法！おすすめフォントやプラグインも紹介
wpinori3745
この記事を読むと分かること！
- おすすめの日本語フォント5選とその特徴
- WordPressの管理画面でフォントを変更する方法（代表テーマ：SWELL、Cocoon、Lightning）
- プラグインを使用してフォントを変更する方法（代表プラグイン：Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts）
- CSSでフォントを変更する方法
- WordPressで一部のフォントを変更する方法
- WordPressでフォントが変更できない時の対処方法
「Webサイトのフォントがイメージに合わないから変更したい...」
「Google Fontsを使いたいけどどうしたらいいの？」
「ここだけオシャレなフォントに変えたい…」
この記事を見ていただいてるということは 現在、こういった悩みを抱えていませんか？
フォントを変えるだけで読みやすくなったり、印象がガラリと変わったり、フォントはWebサイトに大きな影響をあたえますので、ぜひフォントにはこだわってください！
この記事ではWordPressのフォントを変更する方法や、おすすめのフォントを紹介します。
また、簡単に使えるプラグインも紹介していますので、ぜひ試してみてください。
初心者でも簡単に実践できるフォントの変更方法を紹介しています！フォントは読みやすく、サイトのイメージに合ったものを選んで、使用しましょう。
WordPressでおすすめの日本語フォント5選
WordPressで人気がある15テーマで使用されているフォントを調査し、多く使われていた日本語フォントを5つ紹介します。これらのフォントはWebサイトでよく使用されていている定番フォントです。それぞれ特徴を紹介しますのでフォント選びの参考にしてください。
| フォント名 | 実際のデザイン | font-familyでの記述※ |
|---|---|---|
| 游ゴシック |  | Yu Gothic（Windows用） YuGothic（macOS用） |
| ヒラギノ角ゴシック |  | Hiragino Sans |
| Noto Sans JP |  | Noto Sans JP |
| 游明朝 |  | Yu Mincho（Windows用） YuMincho（macOS用） |
| Noto Serif JP |  | Noto Serif JP |
※font-familyを記述する際に、日本語名（例：游ゴシック）と英語名（例：Yu Gothic）の両方を指定する必要はありません。最新の主要ブラウザは、どちらかを指定しておけば表示されます。両方表記するという方法は、過去に日本語名のフォントを認識しないブラウザがあった名残です。
長文でも読みやすい 「游ゴシック」
- 文字が小さめで文字間にゆとりがあるため、文字が見やすく長文でも読みやすい
- Windows 8.1 以降 、 macOS（OS X Mavericks 以降）に標準搭載されており、無料で使用できる
- 標準搭載されているフォントのため表示速度が速い
視認性が高い「ヒラギノ角ゴシック」
- クセがなく読みやすい。また、文字がつぶれにくく視認性が高い
- ９種類のウェイト（太さ）があり、見出し、本文など、目的に応じて選択が可能
- macOSに標準搭載されており、無料で使用できる
- 標準搭載されているフォントのため表示速度が速い
クセがなく使いやすい「Noto Sans JP」
- クセがなく使用しやすいため、とりあえずこれを使っておけばOKという安心感があるフォント
- 9種類のウェイト（太さ）があり、見出し、本文など、目的に応じて選択が可能
- Google Fontsのため無料で使用できる
明るく品のある雰囲気「游明朝」
- 明るく品のある雰囲気を与える。また、文字の形状が明瞭で可読性が高い
- Windows 8.1 以降 、 macOS（OS X Mavericks 以降）に標準搭載されており、無料で使用できる
- 標準搭載されているフォントのため表示速度が速い
親しみやすい印象「Noto Serif JP」
- 字形がクリアで視認性と可読性が高いため、長文でも読みやすい
- 丸みを帯びており親しみやすい印象を与える
- 8種類のウェイト（太さ）があり、見出し、本文など、目的に応じて選択が可能
- Google Fontsのため無料で使用できる
WordPressでフォントを変更する3つの方法
WordPressの管理画面でフォントを変更する
WordPressの管理画面にフォントを設定する項目があるテーマについては、管理画面で簡単にフォントを変更することが可能です。ご使用のテーマの管理画面を確認し、フォントを変更する項目がある場合は、管理画面でフォントを変更してください。
今回は人気テーマのSWELL、Cocoon、Lightningについて、管理画面でフォントを変更する方法を紹介します。
SWELL
フォントに関する設定は、「外観」＞「カスタマイズ」＞「サイトの全体設定」＞「基本デザイン」というメニューの中に用意されている「フォント設定」という項目で行えます。
画像引用：SELL公式サイト
デフォルトでは游ゴシックが設定されていて、ヒラギノゴシック、メイリオ、Noto Sans JP 明朝体（Noto Serif JP）への変更が可能です。詳細はSWELL公式サイトをご確認ください。
Cocoon
フォントに関する設定は、「Cocoon 設定」＞「Cocoon 設定」＞「全体」というメニューの中に用意されている「サイトフォント」という項目で行います。
Cocoonでは12種類のフォントの中から選ぶことが可能です。またフォントとは別に「文字の太さ」という項目があり、サイトのイメージに合わせて組み合わせることが可能です。詳細はCocoon公式サイトをご確認ください。
Lightning
残念ながらLightning（無料版）には管理画面にフォントを変更するための項目が用意されていません。Lightning（無料版）でフォントを変更したい場合は、後述の「プラグインを使用してフォントを変更する」又は「CSSでフォント変更する」を参照してください。
Lightning（有料版）のフォントに関する設定は、「外観」＞「カスタマイズ」＞「Lightning フォント設定」画面で行います。
画像引用：Lightning公式サイト
Lightning有料版ではヘッダーロゴ、グローバルメニュー、タイトル 、本文テキストごとにフォントを設定することが可能で、フォントの種類も13種類と豊富です。詳細はLightning公式サイトをご確認ください。
プラグインを使用してフォントを変更する
WordPressではプラグインを使用してフォントを変更することも可能です。CSSの知識がない人でも簡単にフォントを変更できますので、おすすめできそうなプラグインについて調査しました。
Easy Google Fonts
画像引用：WordPressプラグイン Easy Google Fonts
3年前からプラグインの更新がストップ・・・
『Easy Google Fonts』はGoogle FontsをWordPressで使用するための人気プラグインですが、2024年8月時点では3年前から更新がストップしていました。このプラグインを使用した場合、WordPressのバージョンによっては不具合が発生する可能性がありますので使用方法の紹介は控えます。
Japanese Font for WordPress
画像引用：WordPressプラグインJapanese Font for WordPress
11ヵ月前からプラグインの更新がストップ・・・
『Japanese Font for WordPress』はWordPressのブロックエディタやクラッシックエディタで特定の日本語フォントを選択できるようにするためのプラグインです。このプラグインも2024年8月時点では11ヵ月前から更新がストップしていました。使用した場合、WordPressのバージョンによっては不具合が発生する可能性がありますので使用方法の紹介は控えます。
Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts
画像引用：WordPressプラグインFonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts
WordPressで簡単にGoogle Fontsを使用することができました！
『Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts』はWordPress でGoogle FontsやAdobe Fontsを使用するためのプラグインで、管理画面で簡単にフォントの変更ができます。後述の「WordPressのプラグインを使ってフォントを変更する方法を詳しく解説」で使用方法について詳しく解説します。
CSSでフォントを変更する
CSSの知識がある人や、できるだけプラグインの使用を控えたい人にはCSSでフォントを変更することをおすすめします。WordPressでCSSを記述する方法は2つあり、どちらかの方法でfont-familyを記述することでフォントを変更できます。
まずはfont-familyについて説明します
font-familyとはフォントを指定するためのCSSプロパティ（コード）です。Lightning（無料版）ではサイト全体に対して、font-familyを以下のように指定しています。沢山のフォントファミリー名が指定されていますが、これには理由があります。
Lightning のfont-family
body, html {
font-family: Lato,"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif
}
CSSの記述方法
font-family: ”フォントファミリー名”, ”フォントファミリー名”, ”フォントファミリー名”;
font-familyの記述ルール
| フォントカテゴリ | 総称フォント |
|---|---|
| ゴシック体 | sans-serif |
| 明朝体 | serif |
上記以外のフォントカテゴリはMDN Web Docsのgeneric-nameの項をご確認ください。
「テーマエディタ」にCSSを記述
今回は例としてLightning（無料版）で解説します。
管理画面の①「外観」＞②「テーマエディター」を選択する。
③「編集するテーマを選択」は利用中のテーマの子テーマが選択されていることを確認する。
④「テーマファイル」でstyle.cssが選択されていることを確認する。
⑤font-familyを記述し、⑥「ファイルを更新」をクリックする。
注意!!
「追加CSS」にCSSを記述
管理画面の①「外観」＞②「カスタマイズ」＞「追加CSS」を選択する。
④font-familyを記述し、⑤「公開」をクリックする
WordPressのプラグインを使ってフォントを変更する方法を詳しく解説
『Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts』の使用方法を詳しく解説します。このプラグインはWordPressのフォントをGoogle FontsやAdobe Fontsに変更するプラグインです。CSSの知識がなくても簡単にフォントを変更できますので試してみてください。
管理画面の①「プラグイン」を選択し②「新規プラグインを追加」をクリックする。
管理画面の③「プラグインの検索」に”Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts”と入力し、プラグインが表示されたら④「今すぐインストール」をクリックする。
インストールが完了したら⑤「有効化」をクリックする。
管理画面にプラグインのメニューが表示されるので⑥「フォントのカスタマイズ」＞⑦「FontsPlugin」を選択すると設定画面が表示される。
基本設定
基本設定ではコンテンツ、見出し、ボタンの単位でフォントを変更できます。
フォントを変更したい要素（パーツ）の「フォントファミリー」を指定し、「公開」をクリックするだけです。とても簡単です！！
高度な設定
高度な設定は細かくフォントを指定したい時に使用します。
フォントを変更したい要素（パーツ）の「フォントファミリー」を指定し、「公開」をクリックするだけで、手順は「基本設定」で説明した手順と同じです。
「ブランディング」、「ナビゲーション」、「コンテンツ」画面
「サイドバー」、「フッター」、「フォントの読み込み」画面
Adobeフォントについて
残念ながら変更できず・・・
今回ご紹介したプラグインはその名のとおりAdobe FontsにもついてもWordPressに読み込んで使用できるプラグインです。私も今回、プラグインのマニュアルの手順に従い、Adobe Fontsを読み込んでフォントを変更しようと試みました。しかし、WordPress管理画面でAdobe Fontsを選択するまではできたのですが、選択したAdobe Fontに変更することができませんでした。WebサイトがAdobeのCDNを読み込めていないことが原因であることは分かったのですが、対処法が分からず断念しました。対処法が分かり次第、記事を更新したいと思います！
WordPressで一部のフォントを変更する
ここまで紹介したフォントの変更方法は、サイト全体のフォントを変更したり、見出し全部のフォントを変更したりと、ある要素について全てのフォントを変更する方法になります。
ここでは要素の一部だけ違うフォントに変更する方法を紹介しますので、ポイント的に別のフォントにしたい時などに試してみてください。
ブロックエディタで追加した要素のフォントを変更する
ブロックエディタで追加した要素の場合は、フォントを変えたい要素に名前（クラス名）を付け、その名前に対してCSSでフォントを指定することで変更できます。
今回は例として、全て「Noto Serif JP」で表示されている要素に対して、サブタイトルだけ違うフォント（游ゴシック）に変える手順を解説します。
Step1 変更したい要素にクラス名をつける
ブロックエディタを開いて①フォントを変更したい要素をクリックして選択し、画面右側のサイドバーで、②「ブロック」＞③「⚙マーク」＞④「高度な設定」をクリックする。
⑤「追加CSSクラス」にクラス名を入力し、⑥「保存」をクリックしたらクラス名の付与は完了。
クラス名をつける時のルール
使える文字
- 半角の英数字、ハイフン（ – ）アンダーバー（ _ ）
命名のルール
- 頭文字はアルファベット（数字や記号はNG）
- アルファベットは大文字と小文字が区別される
Step2 CSSを記述してフォントを指定する
WordPressにはCSSを記述できる箇所が2か所（テーマエディタ、追加CSS）ありますが、今回は「追加CSS」に記述する手順で説明します。
管理画面の①「外観」＞②「カスタマイズ」＞③「追加CSS」を選択する。
④クラス名とfont-familyを記述し、⑤「公開」をクリックして完了。
ブロックエディタで追加していない要素（ヘッダーやフッター内の要素など）
この場合は変えたい要素のクラス名を調べ、調べたクラス名に対してCSSでフォントを指定することで変更できます。
今回は例として、ファーストビューの見出しのフォントを「Noto Serif JP」から違うフォント（游ゴシック）に変更します。
Step1 変更したい要素のクラス名を調べる
画面上で右クリックし、表示されたメニューから①「検証」を選択する。
② 
をクリックした後、③フォント変更したい要素をクリックすると、④クリックした要素のHTMLコードの背景が青くなる。
Step2 CSSを記述してフォントを指定する
WordPressにはCSSを記述できる箇所が2か所（テーマエディタ、追加CSS）ありますが、今回は「追加CSS」に記述する手順で説明します。
管理画面の①「外観」＞②「カスタマイズ」＞③「追加CSS」を選択する。
④クラス名とfont-familyを記述し、⑤「公開」をクリックして完了。
ファーストビューの見出しのフォントが変更されました！
WordPressでフォントが変更できない時の対処方法
キャッシュをクリアする
「キャッシュ」とは、ブラウザ（Google ChromeなどのWebサイトを閲覧するためのソフト）がインターネット上の情報を一時的に保存する仕組みです。通常ページを表示する際はページのデータをダウンロードしてから表示させますが、再訪問の場合はブラウザに保存されたデータを優先的に読み取っています。この仕組みが原因でCSSが反映されないことがあるので、キャッシュを削除してみましょう。
CSSの記述ミスがないか確認する
クラス名、”font-family”、フォントファミリー名の記述が間違っていないかはもちろん、ピリオドやセミコロンなどの記号が抜けていないかも確認してください。
CSSの記述の中に全角スペースが入ってないか確認する
私はこれが原因でフォントが変わらないことが多いです。全角スペースを無意識に自分で入れてしまうだけでなく、WebサイトからCSSコードをコピーした場合にも発生することがありますので確認してみてください。
記述したCSSの優先順位を確認する
CSSの記述は下に書くほど優先されます。同じ要素に対して何度もfont-familyを記載している場合は一番下に書いたfont-familyで表示されますので、CSSの下の方に意図しないfont-familyの記述がないか確認してください。
まとめ
WordPressでフォントを変更する主な方法は「管理画面で変更」「プラグインを使用して変更」「CSSで変更」の3つです
Webサイト制作の初心者は、まずは管理画面で変更ができないか、確認してください。管理画面では変更できなかったり、管理画面での変更では満足できない場合は、プラグインを使う方法が簡単です。しかし、プラグインを使用したくない人や、一部の要素だけフォントを変更したい人は、CSSを使用してフォントを変更してください。
フォントを変更するだけでサイトのイメージはガラリと変わりますので、閲覧者の興味を引きつける手段の１つとして試してみませんか？
