こんにちは。SaitoKouです。
「Twenty Twenty」のフォントについて気になることがあったのでメモ。( ..)φ
このテーマの欧文書体（アルファベットとか）って特別なものを使っていますよね。名前は「Inter Var」です。
これですね。
ただ、なぜかこのフォントが適用されないことがよくある。
若干違いますよね？ちなみに開発者ツールF12で要素を調べると、「sans-serif」が表示されているとわかりました。せっかくいいフォントが使われているのにもったいないので、どうにかフォントを戻したいと思います。
twentytwenty-style-inline-cssを削除する
開発者ツールで確認すると、優先的に適用されているcssがこれっぽいです。
こいつが邪魔してそうだなとわかったところで、どうしたらいいかわからずいったんお手上げでした。（笑）ただ、WordPress.orgで同じ疑問を持った人がいたので、その人の実装方法を確認しました。
リンク ⇒ remove inline styles | WordPress.org
//function.phpに追記
add_action( 'wp_enqueue_scripts', function() {
$styles = wp_styles();
$styles->add_data( 'twentytwenty-style', 'after', array() );
}, 20 );
これで削除が完了です！
いい感じですね！（右上のリンクの色が変わっちゃってますが、CSSで追記することとします。）
追加CSSで上書きする
開発者ツールで確認できますが、style.cssに書かれているフォント指定部分をそのまま追加CSSに書いちゃいます。
//カスタマイズで追加CSSに追記
@supports ( font-variation-settings: normal ) {
body {
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}
}
これでも一応反映されるようです。
まとめ
フォント修正だけなら、上の二つで何とかなりそうです。さらにフォントを変える場合は、これらを適用してから変更するといいと思います！
デモサイト
Twenty Twenty Sample
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
