【Twenty Twenty #6】デフォルトのフォントが勝手に変わる現象を修正する

こんにちは。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デザインサービスは以下から承っております。