こんにちは。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;
}
}
これを適用すると、下図のようになります。
和文フォントがすべての箇所で游ゴシックになってくれました！
まとめ
多少強引ですが、フォントを変えてみました！皆さんの作成したいサイトの雰囲気に合わせていろいろ試してみてください！
デモサイト
Twenty Twenty Sample
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
