Gutenbergエディターのフォントスタイルをゴシック体に変更する方法

Gutenbergカスタマイズ

WordPress5.0から標準搭載されたGutenbergエディターのフォントスタイル(font-family)の変え方を紹介します。

Gutenbergのデフォルトフォントは明朝体

Gutenbergエディター内のフォントはデフォルトでは、明朝体になっています。ゴシック体に変えるには、テーマやプラグインで「Gutenbergエディターではこのフォントを使って」と明示する必要があります。

しかし、body {font-family: ~}とCSSファイルに書いても、エディターには反映されません。Gutenberg用の書き方をする必要があります。

準備:Gutenberg用のCSSファイルを読み込もう

Gutenbergをカスタマイズするには、別途CSSファイルを読み込む必要があります。詳しくは「GutenbergエディターにCSSを適用させる」が参考になるかと思います。

GutenbergのフォントをカスタマイズするCSS

WordPress5のデフォルトテーマであるTwentyNineteenのコードを参考にしました。!importantを使っているのは気になりますが、公式テーマを参考にするのが一番安心ですね。

.wp-block * { font-family: "Helvetica", "BIZ UDGothic", YuGothic, "Hiragino Sans", Meiryo, sans-serif !important; } /* ダッシュアイコンが上書きされないように */ .wp-block[data-type="core/freeform"] .mce-btn i { font-family: dashicons !important; }

指定するフォントは、下のリンク先から探してみてください。

クラシックエディターのアイコンが表示されない?

上記のコードのうち、
.wp-block[data-type="core/freeform"] .mce-btn i {~}の部分を忘れると、Gutenberg内でクラシックエディターを使ったときにダッシュアイコンが表示されなくなるのでご注意ください。


これはあくまでもGutenbergエディター内のフォントの変え方です。もし、サイト全体(エディター以外)のフォントを変えたいときは以下の記事を参考にしてくださいませ。

同じカテゴリーの記事
同じカテゴリーの記事一覧
WordPressの使い方
サルワカ