TwentyNineteenのテーマのfont-familyを見てみると、「基本的なフォント」が設定されています。
今回は記事タイトル通りの内容ですが、TwentyNineteenのfont-familyを設定し、フォントを変更するカスタマイズをご紹介します！
デフォルトのfont-family
Twenty Nineteenのデフォルトで設定されているfont-familyはこのようになっています。
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
さらっとみてみるとmac等のapple系デバイスからの閲覧の場合は、
英数字＝apple-system
日本語＝Hiragino Sans
が適用されています。
Windowsを使っているので、いまいちわかってないですが、apple製品ではデフォルト的なフォントみたいです。
一方Windowsでは以下のようになっています。
英数字・日本語＝メイリオ
一応メイリオは日本語の標準フォントとしてWindowsでは使用されていますが、ウェブサイトでは一般的に好んで使っているという人はあまり見かけません。
font-familyはこんな感じになっているのですが、気になるのがなぜか【!important】がコードについているという…
なぜに…
font-familyの設定
それではfont-familyを設定していきます。
一応カスタマイズになるので、子テーマを使用してください。
【WordPress】テーマTwenty Nineteen の子テーマを作る方法
フォントを設定する場合は、以下のコードをstyle.cssに追記してください。
html[lang="ja"] .site *{
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif !important;
}
基本的には「游ゴシック」が表示されるようになっています。
万が一、「游ゴシック」が適用されない場合、apple系デバイスの場合は「ヒラギノ角ゴシック Pro」が、Windowsの場合には、メイリオが表示されるようになっています。
特に英数字系のフォントは設定していません。
恐らくフォントを設定するclass名がわかれば、だれでもfont-familyを設定することができるので、お好みのfont-familyを設定してみて下さい。
まとめ
本当はbodyなどに追記したいのですが、なぜか反映されず、親テーマのfont-familyを確認してみると、【html[lang=”ja”] .site *】というclass名が指定されていたため、上記のようになっています。
詳しく親テーマのコードをみてみると、世界中の言語に対応できるようこのようなクラス名になっているようですね～
