WordPressでフォントを変える方法（サイズやカラーの変更、最適化）

フォントを変えるだけでつまらないウェブサイトが一気に素敵になります。WordPressでフォントを変更する方法を学んで、あなたのウェブサイトをモダンでプロフェッショナルなものにし、ブランド力を高めましょう。

でも、WordPressのサイトではどのようにフォントを使用すれば良いのでしょうか？また、どのようにして、サイトのデザインに合ったフォントを選べば良いのでしょうか？

このガイドでは、WordPressのフォントに関する必要な知識を全て網羅しています。具体的には次のようなことをご紹介していきます。

フォントに関する専門用語

まずはウェブ上のフォント（HTMLフォントともいう）に関連する専門用語から見ていきましょう。

• ウェブフォントとは第三者のウェブサイトで提供され、あなたのサイトにリンクされるフォントのことを言います。
• ローカルに置かれたフォントとは、あなたのウェブサイトのサーバー上に置かれているフォントのことを指します。
• 「ウェブセーフなフォント」とは（ほとんど）全てのコンピューターにあらかじめインストールされている限られた種類のフォントのことを指し、閲覧者全員が同様に見ることができます。

それでは、あなたのウェブサイトにフォントを追加する方法を見ていきましょう。

フォントをWordPressサイトに追加する方法の選択肢

実際にサイトにフォントを追加する前に、どのような選択肢があるか知っておくと良いでしょう。

フォントはサイトのデザインの一部であり、多くの場合テーマの中でコーディングされますが、そうでない場合もあります。時には、より多くの種類のフォントが使えるよう、プラグインを使用したい場合もあるでしょう。

いくつか選択肢をご紹介します。

• プラグインをインストールして、Google Fontsなどのウェブフォントを使用する
• テーマにウェブフォントのコードを書き込み、キューに追加する（思っているほど難しくありません）
• 自分のウェブサーバー上にフォントを置き、ご利用のテーマに追加する

大きく分けて二つです。自分のウェブサイトの外に置かれたウェブフォントを利用するか、フォントファイルを自分のサーバー上に置くか。このガイドではそれぞれのメリット、デメリットもご紹介します。

では、何故ウェブフォントを使った方がいい場合があるか、そしてその追加方法など、ウェブフォントについて詳しく見ていきましょう。

WordPressでウェブフォントを使用する

ウェブフォントは、ウェブサイトで使用できるフォントの種類を大量に簡単に追加できるため、フォント追加の手段として最も人気です。

ウェブフォントとは？

ウェブフォントとは第三者のサービス提供者のウェブサイト上に置かれるフォントを指します。ファイルをあなたのサイトにコピーするのではなく、サービス提供者のサイトにリンクを貼ることで、そこからフォントが読み込まれます。

つまり、自分のサーバー上のスペースを占領することなく、大量のフォントから選べるようになるのです。また、フォントファイルが更新された時に、ファイルをわざわざアップデートしなくても、サービス提供者側が更新する新しいバージョンに自動で更新されます。

通常、ウェブフォントは無料、または有料の定期購読プランで提供されます。人気のあるウェブフォントサービスは次のとおりです。

• Google Fonts 最大手の無料ウェブフォントサービス。また、フォントは全てパソコンにダウンロードできるので、ウェブサイトで使用しているフォントを使用してオフラインの素材を作成することもできます。しかも全て無料。
• Adobe Edge ウェブ Fonts こちらも無料のサービスです。Adobe製品向けのサービスではありますが、他のウェブサイトでも問題なく使用できます。
• Fonts.com有料のサービス。印刷素材と同じフォントを使用する必要があり、そのフォントが無料サービスでは利用できない、といった状況で便利です。
• fontfabricウェブフォントやオンラインで使える有料フォントを提供するフォントデザイナーのサービス。有料ですが、その分Google Fontsなどを使うよりもユニークなサイトが作れます。

これらのサービスではいずれもWordPressサイトにコードを書き加えるか、もしくはプラグインを追加することでサービス提供者のサーバーから直接フォントが利用でき、プラグインを使用する場合、コードを書き加えずにウェブフォントを利用できます。

これは何らかの理由で訪問者がウェブフォントをうまく読み込めない場合の備えとして使うことができます。これについては、後ほど詳しくご紹介します。

ウェブフォントを使うべき理由

さて、ウェブフォントとは何かということを理解したところで、次は自分のサーバーにフォントを置くのではなくウェブフォントを利用するべき理由を見ていきましょう。

次のようなメリットがあります。

• 簡単：数行コードを追加するかプラグインをインストールするだけでいいので、フォントファイルをダウンロードしアップロードするよりも簡単。また、将来的にフォントを変えるのが楽です。
• フォントの種類：何百万ものウェブフォントから選ぶことができ、その種類は常に増えています。
• 更新：フォントスタイルや文字の種類の追加など、フォントファイルのアップデートが必要な場合でも、何もしなくても新しいバージョンにアップデートされます。

多くのサイトはウェブサイトにバックアップとして、ウェブセーフなフォントを組み合わせて使用しています。WordPressではそれがとても簡単にできるのです。

サイトに合ったウェブフォントを見つける

ウェブフォントを使用することを決めたら、次はどのフォントを使うべきか、という難しい決断が待っています。

昔は、ウェブ開発者は予めインストールされているウェブセーフなフォント以外の選択肢がなかったため、フォントの選択はとても容易でした。せいぜい「serifかsans-serifか」という選択肢程度です。（serifは文字の太い方の線の端にひげ飾りがつきますが、sans-serifにはつきません）それ以外の選択肢はとても限られていました。

しかし、今では選択肢は無限です。

サイトに合ったフォント選びのヒントをいくつかご紹介します。

• 既にあるあなたの印刷物に使用されているフォントを見て、同じフォントをウェブフォントから探してみましょう。同じものが無ければ、似たような物を探してみましょう。
• 類似したサイトを見てみましょう。どのようなフォントを使っているでしょうか？同じフォントを使用するのはお勧めしませんが、あなたのサイトの「ターゲットに伝わりやすいイメージ」としてのフォントの種類があるかもしれません。
• フォントでどのような雰囲気を伝えたいか、考えてみましょう。モダンなもの、伝統的なもの、楽しそうなもの、真面目そうなもの…それぞれ違った雰囲気のフォントがあります。
• 本文には読みやすいフォントを、見出しには必要に応じて特徴のあるフォントを使うようにしましょう。
• Google fontsで人気なフォントから選んでみましょう。サイトの訪問者が見慣れた、見やすいフォントばかりです。

フォントを選んだら、それをよく吟味してみましょう。Google Fontsなどのサービスでは、好きな文章を打ち込んで選んだフォントがどのように表示されるか確認することができます。実際の文章を確認することでフォントが決定しやすくなるかもしれません。

ウェブフォントを使用すれば、フォントの変更も簡単なので、 テーマを作成している最中や、サイトの設定をしている最中に別のフォントに変更することも可能です。

ウェブフォントをWordPressプラグインで追加する

フォントを選んだら、いよいよサイトに追加します。

テーマのファイルにコードを追加するのが嫌だという人は、Goggle Fontsにアクセスし好きなフォントを利用できるようになるプラグインをインストールすることができます。

Google Fonts TypographyプラグインではGoogle fontsのライブラリの全てのフォントにアクセスでき、 WordPressのカスタマイザーで閲覧することができます。

他のプラグインと同様にプラグインをサイトにインストールし有効化します。

外観＞カスタマイズからカスタマイザーを開きます。「Google Fonts」という項目が表示されます。

リンクをクリックし、フォントの設定を行う画面に移動します。次のように設定します。

Basic Settings（基本設定）: 本文、見出し、ボタンのデフォルトのフォントの設定を行います。次のスクリーショットでは、本文には読みやすいセリフのフォントを、見出しにはより目立つフォントを選んでいます。

Advanced Settings（詳細設定）:ここでは、ブランディング（サイトのタイトルと説明）、ナビゲーション（メニュー）、そして本文と見出しの詳細設定やサイドバー、フッターの設定が可能です。また、どこにも指定せずにフォントを読み込むことができるので、カスタマイザー内のお好きなカスタムCSSに追加することができます。

Font Loading（フォントの読み込み）：不要なフォントのスタイル（太字、イタリック体など）、それらのチェックを外すことでサイトが不必要に重くなるのを防ぐことができます。

Debugging（デバッグ）：この機能を使用すると正常に作動しないフォントを強制的に表示できます。

これらの設定を色々と変えてみて、希望するとおりに表示されることをカスタマイザー内で確認しましょう。設定に満足がいったら、「公開」をクリックします。公開ボタンを押す前にカスタマイザーを離れてしまうと変更した設定が消えてしまいますのでご注意ください。

フォントカラーを編集する

無料版のプラグインでは、フォントカラーは編集できません。カラーの変更をするには有料版のプラグインを利用するか、カスタマイザー内の「追加CSS」を利用します。

カスタマイザーのホーム画面に戻り、「追加CSS」のタブをクリックします。独自のCSSコードを追加できる空白のテキストエリアが表示されます。

編集したい要素を確認するには、その要素を選択し、ブラウザで要素を検証し、現在のスタイルを確認します。

次の例ではGoogle Chromeを使用して、 h1（見出し1）を選択しました。

このWordPressテーマでは、本文のカラーを踏襲しています。もっと具体的に指定したい場合、CSSのテキストエリア内に変更したい要素の色を記載します。この場合、次のようになります。

h1 {
 color: #f542f5;
}

すると、h1が明るいピンク色になりました。

同じように全てのテキスト要素の色を変更できます。また、他の画面に含まれていないフォントに変更することもできます。フォント変更のためのCSSコードを知りたい方は、記事を読み進め「CSSでフォントを変更する方法」についての説明箇所をご参照ください。

ウェブフォントを手動で追加する

プラグインをインストールしたくない場合、テーマのコードを編集できるのであれば、functionsファイルとスタイルシートにコードを追加することでウェブフォントをインストールし、使用できます。

自らのサイトでオリジナルのテーマを使っている場合には、functionファイルとスタイルシートをテーマから編集しましょう。WordPressテーマディレクトリから購入または入手した、サードパーティのテーマを利用している場合には、子テーマを作成が先決です。そして、functions.phpとstyle.cssという2つのファイルを作成します。

それでは手動でウェブフォントを追加する方法を詳しく見ていきましょう。もっとも一般的であり無料でもあるGoogle Fontsを例にして説明していきます。

フォントを選びリンクを取得する

まずはGoogle Fontsでフォントを選びます。横にあるプラスのアイコンをクリックしてライブラリに追加します。

次に画面下部のライブラリのタブをクリックすると、サイトに追加するコードが表示されます。他のスタイルも追加したい場合は、Customizeのタブをクリックし、追加したものを選択します。そしてEmbedのタブに戻ります。

ここで、表示されたコードを全てコピーしてはいけません。サイトのヘッダーの<head>内でフォントを呼び出すのではなく、フォントをキューに入れます。WordPressではこれが正しい方法です。

ですので、表示されたコードのうち、フォントへのリンクの部分だけをコピーします。

今回の場合、Google Fontsで次のようなコードが表示されますが、

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

次の部分だけをコピーします。

https://fonts.googleapis.com/css?family=Raleway

フォントをキューに入れる

テーマのfunctionsファイルを開き、フォントへのリンクを、選んだフォントのものに差し替えて、次のコードを書き加えます。

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

これでGoogle Fontsのサーバーからスタイルが読み込まれます。今後、さらにフォントを追加する必要がある場合は、functionsファイルに新しい行を追加するか、同じ行の中にこのように書き加えます。

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

こうするとMerriweatherとRalewayのフォントの両方を読み込みます。

フォントをスタイルシートに追加する

functionsファイルにコードを加えるだけでは、サイトにはまだ反映されません。テーマのスタイルシートにもコードを追加する必要があります。

テーマのstyle.cssファイルを開き、ウェブフォントを個別の要素に指定します。コードは他のフォントに関するCSSコードの後に追加するようにしましょう。そうしないと既存のコードが優先されてしまいます。

どの要素に適用するかは自由ですが、本文は読みやすいフォントを使用し、見出しには少し変わったフォントを使用するのが一般的です。

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

上記の場合、h1、h2、h3にはMerriweatherが適用され、それ以外にはRalewayが適用されます。

あとは、スタイルシートを保存し、思った通りにサイトが表示されているかどうかを確認しましょう。新しいフォントが表示されない場合は、ブラウザのキャッシュをクリアし、スタイルシート上の後に記載したフォントに関するコードに上書きされていないかを確認しましょう。このようなことがあるので、新たなコードはスタイルシートの最後尾に記載するか、元のフォントのコードを削除して記載する（こちらの方がより良いでしょう）ことをお勧めします。

予備のフォントを追加する

何かしらの理由でサイトの訪問者にウェブフォントが表示されないことがあります。閲覧者の接続状況が悪いか、ウェブフォントが表示されない古い端末を使用している可能性などが考えられます。または、ウェブフォントサービスに技術的な問題が発生していることも考えられます。

このような理由から、予備のフォントを指定しておくと良いでしょう。

Google fontsで表示されるコードには既に簡素化された予備のフォントとしてserif、またはsans-serifが指定されますが、もう一工夫することも可能です。

サイト訪問者の端末に既にインストールされているフォントを指定した上で、そのフォントがインストールされていないときのためにさらなる予備として、serif、またはsans-serifを指定しましょう。

スタイルシートへ戻り、次のように編集します。

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

こうすると、特に問題がない場合、設定通りのウェブフォントが表示され、何か問題がある場合はHelveticaとGeorgiaが、それも表示できない場合は、利用者のブラウザが読み込むことのできるserifとsans-serifが表示されます。

WordPressのサーバー上にフォントを置く

開発者の中にはウェブフォントを使用せずに、自分のサーバー上にフォントを置きたいという人もいます。あなたも、もしかしたらその一人かもしれません。

これにはセキュリティ、 パフォーマンス、もしくは予算上の都合など、いくつかの理由が関係しています。

パフォーマンスが心配だ、という方に関しては、この記事の後半でウェブフォントのパフォーマンスを最適化する方法をご紹介しています。しかし、それでもローカルで貫くと決めた場合、その方法を知っておかなければなりません。

自分のサーバー上にフォントを置く理由

ウェブフォントの使用はより簡単で柔軟な上、サーバーの容量を食わないというメリットがあります。しかし、フォントをローカルに置く方が適切な場合もあるでしょう。

その理由としては次のようなものが挙げられます。

例えば、次のような懸念を抱くケースです。

• セキュリティの理由から第三者のリソースを読み込みたくない場合（自分のサイトのセキュリティなら自分でコントロールできる）
• 第三者のサービスがサイトのパフォーマンスに影響を与えると、感じている場合
• フォントファイルを購入し、それを使いたい場合（この際には、ライセンスに、ウェブサイトでの使用や印刷物への使用が含まれていることを確認しておきましょう）
• サイトがイントラネットなど、ローカルサーバーでホスティングしていて、ユーザーがウェブフォントへのアクセスを持たない場合

サーバー上に置けるフォントを入手できる場所

ウェブフォントの中にもダウンロードしローカルサーバー上に置けるフォントは多く存在しますが、ライセンス上許可されているかを確認する必要があります。Google Fontsの場合、許可されています。

また、ウェブフォントとして使用できないものの、ダウンロードして自らのサーバー上に置けるフォントもあります。パソコンにダウンロードできるフォントは全てウェブサイトにアップロードし、保存することができます。ウェブフォントとして利用できないけれども自分のブランドに使用したいフォントがある、という場合には、この方法が一つの解決策となりますが、こちらもライセンスで許可されているかを良く確認しましょう。

ローカルサーバー上に置いたフォントをWordPressに追加する

フォントを自分のローカルサーバーで利用すると決めたところで、今度はその設定方法を学びましょう。

その設定方法はウェブフォントを使用する場合とは異なります。フォントファイルをサイトにアップロードしてスタイルシート内でリンクします。Functionsファイルでのエンキューは必要ありません。

フォントをダウンロードし変換する

まずは使用したいフォントをダウンロードします。Google Fontsの場合、ライブラリのフォントに表示されるダウンロードアイコンをクリックしましょう。

フォントのZipファイルをコンピューター上で解凍し、サイトで使用しないスタイルを削除します。使用することのないファイルをアップロードする意味はありません。

ウェブサイトで使用するにはファイルは.woffフォーマットである必要があります。.woffフォーマットになっていない場合（Google fontsでダウンロードすると、このフォーマットになっていません）Convertioなどのサービスを利用し変換します。

フォントをテーマにアップロードする

次はフォントファイルをwp-content/themes/themename（＊themenameの部分があなたのテーマのフォルダになります）にアップロードすることで、テーマに組み込みます。テーマのフォルダの中で、フォントのファイルを例えば「fonts」などの名前をつけたフォルダにまとめて保存しておくと良いでしょう。

サードパーティ製のテーマを使用している場合、フォントファイルとスタイルシート用の子テーマを作成してください。

ここまで完了したら、今度はフォントのコードをスタイルシートに追加します。

CSSにフォントのコードを追加する

テーマのスタイルシートを開きます。

フォントの部分を実際にあなたが使用するフォントに置き換え、次のコードを追加してください。

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Medium.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Raleway';
 src: url( "fonts/Raleway-Bold.ttf") format('woff'); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: 'Merriweather';
 src: url( "fonts/Merriweather.ttf") format('woff'); /* medium */
 font-weight: normal;
 font-style: normal;
}

このように必要なだけ追記します。太字やイタリック体など、そのフォントの別のスタイルを利用したい場合、上記の例でRalewayの太字と通常の太さをそれぞれ指定しているように、その都度@font-faceで始まるコードを用いて、それぞれの太さとスタイルを指定する必要があります。

後は、ウェブフォントの時と同じように、要素ごとにフォントを指定します。

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( "/fonts/Raleway-Medium.ttf" );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

これで、あなたのローカルサーバー上に置いたフォントがウェブサイトに表示されます。

WordPressでフォントを変更する

WordPressのサイトにフォントをインストールする方法をご紹介しました。さて、ではこれを編集したり変更したりするには、どうすれば良いのでしょうか？

フォントを編集するには、カスタマイザーで編集する方法、投稿・固定ページ編集画面で編集する方法、そしてCSSを用いる方法の3つがあります。

フォントのスタイル、カラー、サイズを変更するこれら3つの方法をそれぞれ詳しく見ていきましょう。

WordPressでフォントスタイルを変更する

ブロックエディタ、旧エディタそれぞれでの変更方法をご紹介します。

ブロックエディタ（Gutenberg）でフォントスタイルを変更する

Gutenbergエディタが採用された最近のバージョンのWordPressを利用している場合、投稿や固定ページのテキストを編集している最中にフォントのスタイルの変更が可能です。

編集したいブロックを選択すると、上部にメニューが表示されます。

編集したいテキストを選択し、アイコンをクリックすると太字やイタリック体に変更できます。その横の矢印のアイコンをクリックすると、取り消し線も選択できます。

旧エディタでフォントスタイルを変更する

古いバージョンのWordPressを使用している場合や、Classic Editorのプラグインをインストールしている場合でも、フォントスタイルの編集が可能です。（Gutenbergエディタを使用したくない場合はWordPressをアップデートした上でGutenbergを無効にすることをおすすめします）

Classic Editorのメインの編集パネルの上部にはツールバーがあり、テキストスタイルが編集できます。ツールバー切り替えのアイコンをクリックすると、取消し線など、その他のオプションも表示されます。

カスタマイザーでフォントスタイルを変更する

特定の要素のフォントスタイルを変更したい場合、カスタマイザーから手動でCSSコードを追加することもできます。

カスタマイザーを開き、追加CSSをクリックします。CSSコードを打ち込める画面が開きます。

テキストボックスの中にCSSコードを打ち込みます。全てのh1とh2の要素をイタリック体にしたい場合、次のように打ち込みます。

h1, h2 {
 font-style: italics;
}

スタイルシートでフォントスタイルを変更する

スタイルシートにコードを追記するのに抵抗がないのであれば、次の方法をお勧めします。

サードパーティの作成したテーマを使用する場合、自分のスタイル専用の子テーマを作成しなければ、テーマをアップデートした際に全ての変更内容が失われてしまいます。WordPressが子テーマであることを認識できるように、子テーマ内にスタイルシートを作成し、そこでフォントのスタイルを記載します。

独自のテーマを使用している場合、直接スタイルシート内のCSSコードを編集します。ファイル名はstyle.cssで、wp-content/themesのテーマのフォルダの中にあります。

フォントスタイルのコードを追加する際は、別のコードによって上書きされないよう、スタイルシートの最後にコードを追記します。または、特に必要ない場合は元々のフォントスタイルのコードを削除、もしくは上書きしてしまうとより良いでしょう。

font-weightを使用して特定の要素の太さを変更します。

span.featured {
 font-weight = bold;
}

font- styleを使用して特定の要素のスタイルを変更します。

span.featured {
 font-style = italic;
}

text-alignmentを使用して行の揃え位置を変更します。

span.featured {
 text-alignment: center;
}

WordPressでフォントカラーを変更する

サイト内の特定のテキストの色を変えたいという場合もあるでしょう。ただし、色はあまり変えすぎないように注意しましょう。テーマは元々調和した色合いで構成されているので、色を追加しすぎると、けばけばしく、プロフェッショナルな雰囲気を損なってしまいます。

Gutenbergでフォントカラーを変更する

Gutenbergのテキストブロックでは、テキストのカラーと背景色を変更できます。変更したいブロックを開き、画面右側のブロックの項目の色設定をクリックします。

テキストブロックの背景色と文字色を編集できます。

なお、色の組み合わせが読みづらい場合、上の例のように警告が表示されます。色の変えすぎには注意しましょう。テーマの色味がサイトの雰囲気に合っていたからそのテーマを選んだのでしょうし、色を使いすぎると、主張し過ぎになりかねません。

色設定の下の高度な設定のタブをクリックするとそのブロックにクラス名を追加し、カスタマイザーもしくはスタイルシートでスタイルを指定することができます。例えば、ブロックに.featuredというクラス名を追加すると、そのクラスにスタイルが適用されます。

旧エディタでフォントカラーを変更する

旧エディタのツールバーを使えば、選択したテキストの文字色を変えることができます。特定の単語を選択し、その部分だけ色を変えることも可能です。下の例では、文章を赤色に変更しました。

このように高い柔軟性がありますが、色の変えすぎには注意しましょう。テキスト内に色を使用しすぎると、読みづらいサイトになってしまいます。

カスタマイザーでフォントカラーを変更する

ご使用のテーマがサイトのカラースキームを変更できるものであれば、この方法が最適でしょう。

例えば、次の例では、テーマ全体のカラースキームを選択できるテーマを使用しています。こうすることで、新しい色が調和し、一貫性のあるものになります。

ここでのオプションはお使いのテーマによります。例えば、見出し、リンク、その他の要素を選択し、色を変更できるようなテーマがあります。

ご使用のテーマのオプションでは、色を変更したい要素が選択できない場合、カスタマイザーでCSSコードを追加することができます。

カスタマイズ>追加CSS をクリックし、テキストボックスにCSSコードを入力します。

例えば、h1の見出しの色を変更したい場合、次のように入力します。

h1 {
 color: #564534;
}

これで正しく適用されない場合、さらに具体的なCSSコードを使用する必要があるかもしれません。このテーマの場合、サイトの見出しのリンクには#site-titleというIDが使用されているので、次のようなCSSコードを入力します。

#site-title a {
 color: #564534;
}

例に使った色を実際に使用したい色に入れ替えて入力してください。

変更に問題がなさそうであれば、「公開」ボタンをクリックします。

スタイルシートでフォントカラーを変更する

フォントスタイルと同様に、テーマのスタイルシート（もしくは子テーマを作成して）からフォントカラーを変更することもできます。

次の例の色の部分を実際使用する色に変更します。例の中では、サイトの本文の色をbody要素を使用して変更しています。

body {
 color = #222222;
}

別のコードに優先し適用されていることを確認するとともに、他の要素にはその色を適用したくない場合は、それらの要素には元のスタイルが引き続き適用されていることも確認しましょう。個別に指定されていない限りbody要素の色が全てのテキストに適用されます。

WordPressでフォントサイズを変更する

見やすさの観点から、テーマのデフォルトのフォントサイズよりも文字を大きくしたいこともあるでしょう。または、例えばウィジェットエリアの見出しが小さすぎると感じることもあるかもしれません。

Gutenbergでフォントサイズを変更する

Gutenbergエディタでは、各ブロックのテキストのサイズを変更できます。

ブロックを選択し、画面右側のブロックの項目のテキスト設定のタブをクリックします。次の例のように、ブロック内のテキストの文字サイズを大きくしたり小さくしたりできます。

でもやりすぎには注意しましょう。ページ内の段落の文字サイズがばらばらだと、まとまりがなく、読みづらくなります。

旧エディタでフォントサイズを変更する

旧エディタでは特定のテキストの文字サイズを変更する機能はありません。そのため、この機能を使いたい場合には、残念ながらGutenbergにアップグレードする必要があります。

カスタマイザーでフォントサイズを変更する

テーマによっては、カスタマイザーでサイト全体、もしくは見出しや本文を指定してフォントサイズを変更することができます。

お使いのテーマでカスタマイザーでのフォントサイズの変更ができない場合でも、追加CSSで文字サイズの変更が可能です。カスタマイズ＞追加CSSをクリックし、テキストボックスにCSSコードを入力します。

次の例ではウィジェットエリアの見出しを次のCSSコードを用いて大きくしています。

h2.widget-title {
 font-size: 3em;
}

少し大きくし過ぎたかもしれませんが、大体のイメージはつくでしょう。

スタイルシートでフォントサイズを変更する

スタイルシートでフォントサイズを変更する方法は、フォントの色やスタイルを変更する方法と同じです。

サイトのテキスト全てのサイズを変更したい場合は、body要素を使います。

body {
 font-size: 14px;
}

body要素はpixelで指定しますが、他の要素にはemを使用し、body要

素の文字サイズとの比較で表されます。

h1,
#site-title {
 font-size: 2em;
}

テーマのスタイルシートのフォントを変更する場合は、実際のサイトを台無しにしてしまわないように、まずは、必ず、ステージングサイトで検証するようにしましょう。

WordPressでフォントを最適化する

ウェブフォントを使用していても、サーバー上に置いたフォントを使用していても、フォントを最適化するに越したことはないでしょう。

読み込み速度とデザインの観点でフォントを最適化するためのヒントをご紹介します。

パフォーマンスの観点でフォントを最適化する

ウェブフォントを使用している場合、別のサーバー上に置かれているからといって読み込みが遅くならず、なるべく早く表示されるよう、できる限り工夫をしたいと考えるのは当然です。

• キャッシュを利用し、ページを読み込む度に再構築する必要がないようにする（Kinstaのホスティングプランには、デフォルトでキャッシュ機能が組み込まれています）
• コンテンツデリバリーネットワーク、CDNを利用してフォントを提供するウェブフォントサービスを利用する（Google Fontsではフォントの読み込み速度向上のためにCDNを利用しています）
• 必要なフォントのみ利用する。使用しないフォントのバリエーション（太さやスタイルなど）をスタイルシートにエンキューしない（後から必要になれば、いつでも追加できます）
• ウェブフォントを使用する場合、必ず正しい方法でエンキューする（ウェブフォントサービスが推奨していたとしてもスタイルシート内に@importを使用して読み込んではいけません）
• CSSコードを手動で入力する時は、phpファイルの<head>内ではなく、テーマのスタイルシートに記述（カスタマイザーやブロックを使用せずにテーマに手動でCSSコードを入力した方が良いのはこのためです。カスタマイザーやブロックでは、スタイルシートではなくページ内にインラインCSSが記述されてしまいます）
• ページ読み込み速度を数ミリ秒速めるためにCSSインライニングの使用を検討する（これはBase64を使用してページを読み込む前にCSSコードをスタイルシートから追加するプロセスなので、ブラウザで余分なファイルが読み込まれるのを防ぎます。インラインCSSコードを記述しないという一つ前のアドバイスと相入れない考え方のように思えますが、別のCSSファイルで実行するのであり、手動でインラインCSSコードを記述するという意味ではありません。複数のフォントを読み込む場合、インラインコードの使用により多少サイトの読み込み速度を速くすることができることもあります）
• コード圧縮を使用して、スタイルシートのサイズを小さくすることができます。Kinstaをご利用であれば、MyKinstaからコード圧縮機能をお選びください。この機能により、数回クリックするだけでCSSとJavaScriptの自動圧縮を行うことができ、サイト高速化が捗ります。
• フォントをローカルサーバーに置いている場合、必要なフォントやフォントのバリエーションのみをアップロードする。必要なバリエーションを追加するのに@font-face以外のコードを使用しない
• フォントをローカルサーバーではなくCDNに置くことを検討する
• フォントをローカルサーバーに置く際、woff2、woff、ttf、eotのフォーマットも含める（ブラウザが最も速く読み込むフォーマットを選択して表示します）
• サイトのタイトルに複数のフォントを使用している場合、フォントライブラリ全てを読み込まず、必要な文字のみを読み込む

したがって、サイトのタイトルがKinstaだとすると、次のようなスタイルシートを作成することで、パフォーマンスを少し改善できます。

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway&text="kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

デザインの観点でフォントを最適化する

フォントのパフォーマンスを最適化するだけでなく、視覚的な最適化もしておきたいものです。つまり、フォントがサイトのデザインやオフラインの素材にうまく合致するようにしましょう。

これは、プラグインまたは子テーマを使用して、テーマに既にバンドルされているフォントの他に追加のフォントを導入する場合に、特に言えることです。色やスタイルのバラツキのあるフォントを多用すると、テーマ全体が乱雑に見えるリスクがあります。

サイトに新しいフォントを追加する前に、次を考慮してください。

• 新しいフォントは既存のフォントと調和していますか？同様のスタイルや雰囲気を備えていますか？
• 既存の出版物に使用されているものとマッチする必要があるものの、同じものをウェブフォントとして使用することができない…という場合には、Google Fontsでできるだけ一致するものを見つけてみてください。
• 選択したフォントは、あなたのブランドイメージと一致していますか？本格的なビジネスを運営している場合は、Comic Sansは避けたいものです。（実際、運営しているサイトの種類に関係なく、Comic Sansはなかなか使用しませんが）
• フォントの色を変更する場合は、テーマのデザインに既に含まれているか、それと調和する色を使用するようにしてください。あまりにも多くの色を追加すると、サイトが派手で、プロフェッショナルさに欠けてしまいます。
• Google Fontsでフォントのペアを探している場合には、fontpair などのサービスを使用して、うまく調査する2つのフォントを見つけることができます。

使用するフォントは、訪問者がサイトにアクセスしたときに抱く印象に大きな影響を与えます。これを考慮し、ブランドイメージを強化するフォントを選択するようにしましょう。

バリアブルフォントを使ってみる

バリアブルフォントは、サイトへの多くのフォントの追加をより効率的にする新しい種類のフォントです。

より多くの情報を1つのフォントファイルに保存できるので、フォントのバリエーション（太字、斜体など）が必要な時に、複数のフォントファイルを読み込む必要はなく、1つだけを読み込む仕組みです。

複数のフォントの太さ、スタイル、傾斜といったスタイルを持つフォントの場合、これにより多くのファイルスペースが節約でき、@fontfaceを使用してフォントをエンキューまたは追加するプロセスも容易になります。

バリアブルフォントは、Chrome、Edge、Firefox、およびSafariの最新バージョンでサポートされていますが、古いブラウザーには対応していません。したがって、これを使用する際にはフォールバックが必要になります。そして、まだ利用できるバリアブルフォントは多くありません。Google Fontsには含まれていませんが、Googleは仕様をサポートしているため、今後追加される可能性は考えられます。

フォント開発者は日夜、より多くのバリアブルフォントの作成と信頼性の向上に取り組んでいます。そのため、さらに開発が進んだ頃には、バリアブルフォントを使って、フォントの最適化を図ることができるように、今から注目しておきたいものです。

まとめ

WordPressサイトのフォントを変更するのは簡単な作業ではありません。以下のように、さまざまな可能性があります。

1. プラグインをインストールしてウェブフォントを使う
2. テーマにコードを記述、エンキューしてウェブフォントを使う
3. 自らフォントをホスティングする

いずれかを選んだ後には、パフォーマンスを向上させるためにフォントを最適化する方法に焦点を当てる必要があります。今回の記事のヒントを活用すれば、WordPressでフォントを変更するだけでなく、テーマでフォントをより細かく制御できるようになるはずです。

読者にコンテンツに集中してもらうためには、ページやブログ記事のレイアウトを「断捨離」するのが効果的。詳しくはWordPressサイトのサイドバーを削除する方法（4つのやり方）をご覧ください。