本ページはプロモーションが含まれています
WordPressのテーマの中には、フォントが明朝体などに設定されており、あまり良い見栄えではないものもあります。
海外で開発されたテーマでは、日本語の対応がされておりず、フォント指定が反映されていないということが1つの原因です。
せっかく良いデザインのテーマを見つけても、フォントが格好悪くてしっくりこないというのはもったいないですね。
今回は、そのWordPressのテーマフォルダで使用されるフォントの変更方法をご紹介します。
フォントを変更する前に注意する点
フォントを変更する際、テーマファイルを編集することになります。不必要な部分を編集してしまい、テーマ全体に不具合を起こすことのないようにいくつか注意する点があります。
バックアップを取る
作業に入る前に必ずバックアップを取りましょう。不測の事態に備えて、サーバーにアップされているファイルとデータベースに格納されている投稿記事などのコンテンツデータをバックアップしておきます。
子テーマを作成する
元の親テーマを編集するのではなく、子テーマを作成して子テーマを編集しましょう。編集に失敗しても復元できます。
また、フォントの変更はWordPressのコアファイルを編集することもあります。この場合、WordPressのバージョンがアップデートされると編集した内容が元に戻ってしまいます。子テーマを編集することで、アップデートの影響を受けません。
テキストエディターを使用する
ファイルを編集する際、管理画面上で作業するとタイピングミスなどに気づ数編集してしまう可能性があります。AtomやSublime Textなどエディターツールを使用することで、タイピングミスのエラー表示や各種コマンドなどサポート機能が使えるため便利です。
WordPressのフォントの変更
フォントを変更するには、スタイルシートに記述されたfont-familyを編集します。WordPressのコアファイルにはstyle.cssのみスタイルシートが用意されていますが、テーマによっては、スタイルシートをいくつか分割しているものもあります。確認しましょう。
変更方法は3つあります。どれでも可能なので、そこまで方法にこだわる必要はありませんが、FTPソフトに慣れていない方は、管理画面から編集する方が良いかもしれません。
管理画面の外観からフォントを変更する
管理画面「外観」→「テーマの編集」からstyle.cssを編集します。
最初に、スタイルシートの記述内容をまるっとコピーし、使用しているテキストエディター（Atom、Sublime Textなど）にペーストしましょう。CSSファイルとして保存すると、色分けされてソースコードが見やすくなります。
font-family:と書かれている部分を編集しましょう。値に好きなフォントを記述します。command＋F(windowsの場合はcontrol＋F)で特定の文字列を検索してくれます。検索窓にfont-familyと入力すると、素早く編集することができます。
編集が終わったら、管理画面の「テーマの編集」よりスタイルシートにソースコードを貼り付け直し、「ファイルを更新」をクリックします。
FTPソフトでフォントを変更する
FTPソフトでスタイルシートをダウンロードし、テキストエディターで編集する方法もあります。一度ローカル（PC）にファイルをダウンロードして作業をするため、公開されているファイルを直接編集せずに済みます。
ダウンロードしたファイルをテキストエディターで開き、font-familyを編集します。
編集が完了したら、再度FTPソフトを使用してファイルをサーバーにアップロードしましょう。
追加CSSを編集してフォントを変更する
管理画面「外観」→「カスタマイズ」から「追加CSS」を編集することも可能です。スタイルシートを直接編集するわけではないので、「テーマの編集」でstyle.cssを編集するよりも、こちらの方が安心です。
font-familyを指定して、スタイルシートを上書きします。すべての要素にCSSを適用するには、「*」をセレクタに指定します。
作業が完了したら、保存ボタンをクリックしましょう。
WordPressのフォントサイズを変更する
フォントサイズを変更する場合も基本の操作は同じです。ファンとサイズの変更はスタイルシートのfont-sizeを編集しましょう。変更するフォントが当てられているクラスによって、編集するセレクタが変わってきます。
ブラウザのデバックモードで変更したい箇所を選択し、当てられているクラスを確認しましょう。
フォント変更におすすめのプラグイン
テーマの編集をしたくないという方やもっと詳細にフォントを編集したいという方はプラグインを利用するのも良いでしょう。ここではフォントの編集に便利なプラグインをご紹介します。
Font
Fontは管理画面上で編集作業をするのではなく、公開ページを見ながら直感的にフォントを変更できます。自分で作成したTTFもしくはOTFファイルをアップロードすることも可能です。
Easy Google Fonts
Easy Google Fontsは、テーマのカスタマイズ画面からフォントを変更することができます。フォントを指定するだけでなく、大きさやline-heightを編集することもできます。
そのほかのプラグインはこちら
https://techacademy.jp/magazine/7563
まとめ
WordPressのフォント変更はCSSの知識が少しあればとても簡単に変更することができます。海外製のテーマを使用している型でフォントに悩んでいる方は、ぜひこの記事を参考にフォントを日本語対応に修正してみてください。
