ここ最近はすっかりInstagram（インスタグラム）にハマってしまって、ブログ更新がおざなりになってしまっている、あらくま（@sa_arakuma）です。
この「あらくまブログ」ではフォントをSimplicity2デフォルトの仕様ではなく、『Google Fonts + 日本語 早期アクセス』で用意されている9種類の書体のなかから【Noto Sans Japanese】という書体 を使っています。
今回は『Google Fonts + 日本語 早期アクセス』の「Noto Sans Japanese」をSimplicity2で使うための方法とこのブログでのフォントの設定についてお伝えしていきますよ！
『Google Fonts + 日本語 早期アクセス』にある日本語9書体
『Google Fonts + 日本語 早期アクセス』にある書体は以下の9書体になります。
- M+ 1p
- Rounded M+ 1c
- はんなり明朝
- こころ明朝（ひらがな・カタカナのみ）
- さわらび明朝
- さわらびゴシック
- ニクキュウ（カタカナのみ）
- ニコモジ（ひらがな・カタカナ・英数字のみ）
- Noto Sans Japanese
漢字が用意されていない書体もあり、ブログに使える書体は太字の6書体ということになりますね。
どのような書体なのかは『Google Fonts + 日本語 早期アクセス』で確認してください。
『Google Fonts + 日本語 早期アクセス』にある書体をSimplicity2で使えるようにする方法
どのフォントを使うと決めてもSimplicity2で使えるようにするのは同じ方法なので、当ブログで使っている「Noto Sans Japanese」をブログ全体へ設定する場合 で説明していきます。
１．『Google Fonts + 日本語 早期アクセス』で使うフォントを決める。
まずはどのフォントを使うのかを決めます。今回の例では「Noto Sans Japanese」を選びます。
２．『HTML』をSimplicity2の子テーマにある「header-insert.php」に追記する。
「Noto Sans Japanese」を選んでクリックします。
すると画像の場所に「HTML」というhead内に追記するコードがありますので、これをコピーします。
Simplicity2の子テーマにある「header-insert.php」へペーストします。最後にファイルの更新するのを忘れずに。
「Noto Sans Japanese」をお使いになるんでしたら、以下のものをコピペして使っていただいてもOKです。これは『Google Fonts + 日本語 早期アクセス』にあるコードと同じものです。
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
３．『CSS』を書き換えてSimplicity2の子テーマにある「スタイルシート」に追記する。
「Noto Sans Japanese」の画像の場所（「HTML」の下）に「CSS」というスタイルシートに記述するコードがありますので、このコードのうちの「font-family: “Noto Sans Japanese”;」だけをコピー します。
そして以下のような記述を作成します。
body {
font-family: "Noto Sans Japanese";
}上記のコードを子テーマのスタイルシートの「Simplicity子テーマ用のスタイルを書く」の直後に追記しましょう。最後にファイルを更新するのを忘れずに。
参考 WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
万一のための保険をかけておく
ここまででSimplicity2全体のフォントが「Noto Sans Japanese」になりますが、このブログでは 『san-serif（サンセリフ）』 も使い、以下のようにしています。
body {
font-family: "Noto Sans Japanese", san-serif;
}「san-serif（サンセリフ）」を追加しておくことで、『万一、「Noto Sans Japanese」が表示できなかった場合の保険になる』とのことでしたので。
「san-serif」は、指定したWebフォントが表示できなかった場合や、Webフォントに含まれていない文字を 『ユーザの環境にある同じ系列の書体（この場合はサンセリフ体）を表示する』という設定（＝保険）です。
「Noto Sans Japanese」デフォルトでは太いのでフォントの太さを調整
ここまででSimplicity2のフォントを「Noto Sans Japanese」に変更することができましたが、デフォルトのままではフォントが少し太くてスマートではなかったので、フォントの太さを変更しました。
こちらのサイトを参考にフォントの太さを比べていって最終的に落ち着いたのが「font-weight:200;」で、太すぎず細すぎずになったと思ってます。
最終的にSimplicity2の子テーマのスタイルシートには以下のように記述しました。
body {
font-family: "Noto Sans Japanese", san-serif;
font-weight: 200;
}おわりに
この他にもフォントの太さをカスタマイズしているんですがそれについてはおいおいご説明するとして、これでこのブログと同じように「Noto Sans Japanese」をSimplicity2に適用することができますよ！
Simplicity2デフォルトのフォントを変えるだけでも他のブログとちょっとだけですけど差別化することができます。
今回も最後までお付き合いくださって、ホントにありがとうございます！また次回お会いしましょう！！
