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名が指定されていたため、上記のようになっています。

詳しく親テーマのコードをみてみると、世界中の言語に対応できるようこのようなクラス名になっているようですね~

シェアお願いします~
Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Pin on Pinterest
Pinterest

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です