サイトをカスタマイズしていく中で、なかなかしっくりこないのがフォントの問題です。
最近の流行りとしては「游ゴシック」がだいぶ定着してきましたが、この游ゴシックは現在若干の弱点があります。
それはWindows８を含めその前のバージョンの場合には、うまく表示されずかすれた感じで表示され、非常に文字が見にくくなるという問題です。
せっかく力を入れて書いた記事が、閲覧するデバイスによって見にくくなるのはもったいない話でもあります。
デバイスに依存しないフォントを使用する方法として、「Webフォント」を使用する方法があります。
今回はそのWebフォントをWordPressのデフォルトテーマに導入する方法をご紹介します！
子テーマを使いましょう
header.phpのファイルを使用しますので、子テーマを使用しましょう！TwentyNineteenに子テーマを導入する方法はこちらの記事にまとめています
TwentyNineteenの子テーマの作り方はこちら
子テーマがどのような機能かわからない場合はこちら
Webフォントとは？
通常サイト上に表示される文字のフォントは、閲覧しているデバイス（パソコンやスマホ）にインストールされているフォントが表示されます。
逆をいうと、いくらウェブサイトの作成者が凝ったfont-familyを設定しても、閲覧している人のデバイス上にそのfont-familyで設定したフォントがインストールされなければ、そのフォントでは表示されないということになります。
一方でWebフォントは、ウェブ上にあるフォントのデータをウェブサイトが表示される際に読み込みそのフォントを表示させます。
つまり、あらかじめWebフォントの設定をウェブサイト側で設定しており、インターネットにつながった環境で閲覧している限り、どのデバイスでも設定どおりのWebフォントが表示されます。
制作者側としてはWebフォントを使うことで、思い通りにサイト上の文字を装飾することができるため、大きなメリットを得ることができます。
一方でデメリットもあります。
Webフォントはウェブサイト上の文字が表示されるたびに、文字のフォントを読み込むため、サイトの表示スピードが遅くなる傾向にあります。
日本語は他の言語と比べても、ひらがな・カタカナ・漢字と膨大な文字の量があるため、その分読み込むデータも多くなり、それによって読み込む時間もかかってしまいます。
実際に導入する
準備
Webフォントを導入するにあたって、準備をしておきます。
TwentyNineteenの親テーマ内にあるheader.phpのファイルを子テーマにアップロードしてください。
準備はこれで完了です。
Webフォントを選ぶ
導入していくWebフォントを選びます。
ただ、無料で使えるWebフォントは限られてくるため、今回は例として、無料Wウェブフォントで有名な「GoogleFonts」を導入していきます。
GoogleFontsの公式サイトはこちら
https://fonts.google.com/
日本語のフォントとしては、色々とありますが、今回は以下のような２つのフォントを選びました。
日本語：Noto Sans JP
英数字：Roboto
こららのフォントの詳細についてはこちらの記事でまとめていますので、興味があればご覧ください。
Noto Sans JPはゴシック体で、Noto Serif JPという明朝体のフォントもあります。
個人的には画面上で文字を読むときにゴシック体の方が見やすいので、今回はNoto Sans JPを使用します。
コードを取得する！
Noto Sans JPとRobotoのWebフォントを導入するにあたり、コードを取得する必要があります。
手順１
先ほどのGoogle Fontsの中から導入するフォントが決まったら、そのフォントのページ右上あたりにある、「Select This Font」をクリックします
今回は Noto Sans JPとRobotoの両方を導入するので、各フォントのページでクリックしてください。
すると画面下部にこのようなバーが表示されます。
これをクリックするとこんな感じで表示されますので、必要な個所を設定するため、「CUSTOMIZE」をクリックとこんな設定画面が表示されます
手順２
上部にある数字は必要な文字の太さ（font-weight）が選択できます
全てにチェックを入れても大丈夫ですが、チェックを入れれば入れるほど読み込むデータ量が大きくなるため、極力必要なもののみを選びましょう。
最低限、「regular400」と「bold700」があれば、大丈夫かなと個人的には思うので、今回はこの2つにチェックを入れます。
もう一つ下部に「Languages」では、「Latin」と「Japanese」にチェックを入れましょう。
手順３
次に「EMBED」をクリックすると、コードが表示されています。
「STANDARD」をクリックした状態で表示されているコードをコピーします。
これでこちらのページ内での作業は終了です。
header.phpにコードをペーストする
上記でコピーしたコードを先ほど親テーマから持ってきた子テーマのheader.phpにある<head></head>の中にペーストします。
他のコードと干渉しない<head>内であれば、基本的にはどこでも大丈夫です
font-familyを設定する
header.phpにコードをペースト出来たら、もうWebフォントを使うことができます。
使いたい個所に、font-familyで「Noto sans JP」と「Roboto」の記述をしましょう。
ちなみにTwentyNineteenの全体に適用させたい場合は、以下のようなコードになります。
html[lang="ja"] .site *{
font-family:'Roboto','Noto Sans JP', sans-serif !important;
}
念のため解説すると、先に記述したフォントが適用されるので、通常は「英数字のフォント」の後に「日本語フォント」を記述します。
そのため、Roboto、Noto Sans JPという順番になっています。
逆にするとRobotoが適用されないので注意しましょう～
ちなみに以下の記事でもちょっと触れていますが、Twenty Nineteenの場合は、最後に!importantを付けないとfont-familyが適用されないため注意が必要です。
まとめ
TwentyNineteenのフォントに触れるたびに出てきますが、!important問題。
普通に使う分には問題ないのですが、カスタマイズをしていくと結構気になります。
他の部分については、他のテーマとそこまで違いがないですが、font-familyを設定する時には気を付けたいですね～
