非エンジニアでも簡単！WordPress（ワードプレス）のフォントを変更する方法

WordPressは、制作に関する専門的な知識がない人でも、洗練されたホームページを構築でき、手軽に運用ができる魅力的なCMSです。優れた機能を搭載しながら無料で様々なテーマを利用できますが、テーマ以外にも印象を大きく変えるものの1つに「フォント」が挙げられます。WordPressのフォント変更はそれほど難しくないため、今回解説する方法の中で取り組みやすいものを試してみてください。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

WordPress（ワードプレス）でフォントを変更する3つの方法

1.管理画面から変更する方法

管理画面の左メニューの「外観」の中にある「テーマエディター」をクリックすると「テーマの編集」と書かれた画面が表示されます。この画面はテーマを表示するために必要なファイルを直接編集できるものです。

右側の「テーマファイル」と書かれた部分で、編集するファイルを選択できます。上の画像にある「スタイルシート（style.css）」というファイルが今回変更するファイルです。
ここで「font-family」を検索し、ここに記載されているフォントの種類を変更します。フォントの名称を書き換えるだけなので、見ると構成は分かりますが以下の並びです。フォントとフォントの間はコンマで区切ります。

font-family:フォントの種類,フォントの種類,フォントの種類;

変更が終わったら、画面の一番下にある「ファイルを更新」をクリックしてください。

「font-family」は1箇所だけとは限りません。作業漏れを防ぐためにも、変更前に「スタイルシート（style.css）」のコピーを残しておいた方がよいでしょう。この時点で作業が手間だと感じた方は、3つ目に紹介する「追加CSS」の方法をぜひお試しください。

2.プラグインを使って変更する方法

プラグインによるフォント変更は、基本的に自分でCSSなどを書き換えることはないので、非エンジニアにとっては最も簡単に感じる方法でしょう。

フォント変更ができるプラグインはいくつか存在しますが、今回紹介するのは「Easy Google Fonts」です。このプラグインを使えば、Googleが提供する無料のWebフォントによるテキストを表示できます。:Webフォントのメリットは、各デバイスにインストールされているフォントに関わらず、サーバーからフォントデータが提供されるため、どの環境でも同じフォントで表示できるところです。

WordPressの管理画面を開き、左メニューの「プラグイン」から「新規追加」を選択します。プラグインの検索画面から「easy google fonts」を検索して、インストールおよび有効化をしてください。

左メニューの「外観」から「カスタマイズ」をクリックします。画面の最上段にある「Typography」をクリックし「Default Typography」からフォントの設定画面を表示します。

フォントを設定できるのは、本文中の「Paragraphs」と6種類の見出し「Heading1」から「Heading6」です。HTMLを知っている方には、PタグとH1からH6のタグといった方が分かりやすいでしょう。変更したいタグをクリックし編集画面を開きます。ここでは例として「Paragraphs」の「Edit Font」をクリックしました。

すると、フォントの編集画面が表示されます。フォントの種類のほか、斜体や下線付きなどの選択が可能です。タブを切り替えて、フォントの色やサイズ、文字間の余白など細かな設定できるので便利です。変更設定が終わったら、上部にある「公開」をクリックして完了します。

3.CSSを編集して追加する方法

管理画面からソースコードを変更せずに、「追加CSS」という項目にフォントの変更について記述する方法です。ソースコードの中から変更する箇所を見つける必要がなく、CSSの書き方がわかっている人なら、3つの方法の中で一番手間をかけずに設定できるでしょう。

追加CSSの編集画面を開く

管理画面の左メニューの「外観」の中にある「カスタマイズ」をクリックします。開いた画面に「追加CSS」という項目があるのでクリックしてください。「カスタマイズ中　追加CSS」と書かれた画面が表示されます。下にある空欄がフォント変更のCSSを入力するスペースです。

画面下のように好きなフォントを指定するCSSを設定してください。上の画像は、わかりやすいように全テキストを「Impact」というフォントに設定した例です。もし「Impact」がない場合は「YuGothic」を適用するという記述であり、左に指定したフォントが優先になります。画面右側のテキストのフォントがCSSを追加する前と異なるのを確認できるでしょう。CSSの記述が終わったら、上部にある「公開」をクリックすれば完了です。