GeneratePressに日本語フォントを設定する

GeneratePressは海外製テーマですので、デフォルトでは(当然ながら)具体的な日本語フォントの設定がありません。カスタマイザーで日本語フォントを設定することは可能ではありますが、そこは基本的にはGoogleフォントの設定と考えたほうがよいので、もっと基礎的なフォント設定はCSSを使って行う必要があります。

/wp-content/themes/generatepress/assets/css/main.min.css

上記の冒頭部分にテーマが基本とするフォント設定が書かれています。それは以下のとおりです。

body,button,input,select,textarea{
font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

body、button、inputなどの基本的なUI要素すべてに適用されます。

  • apple-system, BlinkMacSystemFont → macOS/iOSのシステムフォント
  • Segoe UI → WindowsのUIフォント
  • Helvetica, Arial, sans-serif → 汎用的なサンセリフ体
  • 絵文字用フォントも含まれています

つまり、環境ごとにシステムフォントを使う設計になっています。

Noto Sans JPを優先させる

当サイトでは、このCSSをカスタマイザーの「追加CSS」を使って、以下のように上書きしています。

  • Windows 11のローカルに含まれているNoto Sans JPを最優先に
  • iOSとmacOS用にHiragino Kaku Gothic ProNをフォールバックに
  • macOSの一部環境での表記としてHiragino Sansを追加
  • Windows用にYu Gothicを追加
  • 最後にsans-serifを保険として
body, button, input, select, textarea {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

関連記事:GeneratePressの見出しフォントの調整