【Twenty Twenty #7】テーマのフォントを変更する

こんにちは。SaitoKouです。

「Twenty Twenty」はテーマカスタマイズに、フォントを変更することはできないようですね。ただ、ホームページを作る場合は個人的にメイリオじゃないほうが好きなので、フォントを無理やり変更したいと思います。

追加CSSで、フォントを変更する

前回の記事でも書きましたが、まずはデフォルトのフォントをinline-cssに上書きされないよう、さらに上書きします。

//カスタマイズで追加CSSに追記

@supports ( font-variation-settings: normal ) {

	body {
		font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}
	
}

すると、下図のようになります。ここからフォントを変えていきます。

この状態で、上で追加したCSSのfont-familyを変更してもいいのですが、それだとブログ本文のフォントが変わってくれません。これもinline-cssのせいなので、思い切って全部追加CSSに書きます。（多少強引な気がしますが、inline-cssを消す方法だとほかにも影響があると怖いから。）

//カスタマイズで追加CSSに、さっきの内容を下記に上書き。
//inline-cssのfont-family部をコピーしたもの↓↓

@supports ( font-variation-settings: normal ) {

    body,input,textarea,button,.button,.faux-button,.wp-block-button__link,.wp-block-file__button,.has-drop-cap:not(:focus)::first-letter,.has-drop-cap:not(:focus)::first-letter,.entry-content .wp-block-archives,.entry-content .wp-block-categories,.entry-content .wp-block-cover-image,.entry-content .wp-block-latest-comments,.entry-content .wp-block-latest-posts,.entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-large,.entry-content .wp-block-quote.is-style-large,.entry-content .wp-block-archives *,.entry-content .wp-block-categories *,.entry-content .wp-block-latest-posts *,.entry-content .wp-block-latest-comments *,.entry-content p,.entry-content ol,.entry-content ul,.entry-content dl,.entry-content dt,.entry-content cite,.entry-content figcaption,.entry-content .wp-caption-text,.comment-content p,.comment-content ol,.comment-content ul,.comment-content dl,.comment-content dt,.comment-content cite,.comment-content figcaption,.comment-content .wp-caption-text,.widget_text p,.widget_text ol,.widget_text ul,.widget_text dl,.widget_text dt,.widget-content .rssSummary,.widget-content cite,.widget-content figcaption,.widget-content .wp-caption-text {
  font-family: "Inter var", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体" ,-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	}

}

これを適用すると、下図のようになります。