非エンジニアでも簡単！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の記述が終わったら、上部にある「公開」をクリックすれば完了です。

WordPress（ワードプレス）のフォント変更における基本の注意点

バックアップを必ずとってから作業をする

作業の前には必ずバックアップを取りましょう。変更点がフォントのみとはいえ、誤って関係のない部分を削除してしまうなど、気をつけていたとしても作業中のリスクは避けられません。面倒でも習慣づけるようにしましょう。

子テーマを使用する

子テーマとは、設定しているWordPressのテーマをカスタマイズ用に別ファイルにしたものです。元からあった設定済みのテーマは、親テーマと呼ばれています。

親テーマを直接編集をすると、親テーマにバージョンアップが発生した際、自分がカスタマイズした部分が上書きされて消えてしまうという可能性があります。子テーマであれば、別ファイルのため、上書きされる心配なく利用できます。

子テーマの作成は、基本的に親テーマをコピーして必要部分を編集するだけなので難しくはありません。とはいえ、ファイルを作成し、WordPressに子テーマとして認識させるためにはいくつかの手順を踏む必要がありますので、慣れていないと作業に時間がかかるかもしれません。不慣れな方はプラグインによる変更がスムーズでしょう。

作業終了後はホームページを確認する

WordPressの変更作業を行った後は、必ず確認をしましょう。誤ってソースコードの一部を削除してしまったり、ページが正しく表示されなくなる場合もあります。

初心者でもできる！WordPress（ワードプレス）のフォント変更

WordPressのフォント変更は、意外と簡単な作業が多いです。サイトのレイアウトやカラーの他に、フォントによる印象の違いを試してみたい方は、ぜひ今回の3つの方法を参考にフォント変更しながら、ユーザーの反響を検証してみてはいかがでしょうか。

WordPress（ワードプレス）のフォント変更にもっと詳しくなろう

WordPressのフォント変更のコツ。ブランドイメージを正確に伝える方法

WordPressのフォントを変更することで、ユーザーの意思決定やブランドイメージを大きく左右するでしょう。この記事では変更のメリットや注意点を解説します。

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

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

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