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;
}