Tailwind CSSでブログのフォントを読みやすいフォントに修正したい。
解決策
Tailwind CSSではデフォルトのフォントは以下になるようだ。
| class | Properties |
|---|---|
| font-sans | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”; |
以下のように、tailwind.config.jsのテーマを設定すれば、デフォルトのフォントを変更できる。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
'sans': ['Proxima Nova', ...defaultTheme.fontFamily.sans],
},
}
}
}
今回、デフォルトフォントに設定するフォントファミリーは、デジタル庁を参考に、 Noto Sans Japanese - Google Fontsを採用したい。
/* デジタル庁のstyleから抜粋 */
font-family: Noto Sans JP,-apple-system,blinkmacsystemfont,Segoe UI,Hiragino Kaku Gothic ProN,BIZ UDPGothic,meiryo,sans-serif;
ただし、デジタル庁では、Noto Sans JPをWebフォントとして読み込み必ず、そのフォントで表示されるようにしているようだ。
/* デジタル庁のstyleから抜粋 */
@font-face {
font-display: swap;
font-family: Noto Sans JP;
font-style: normal;
font-weight: 400;
src: local("Noto Sans JP"),url(/assets/fonts/NotoSansJP-Regular.woff2) format("woff2"),url(/assets/fonts/NotoSansJP-Regular.woff) format("woff"),url(/assets/fonts/NotoSansJP-Regular.ttf) format("truetype"),url(/assets/fonts/NotoSansJP-Regular.otf) format("opentype")
}
@font-face {
font-display: swap;
font-family: Noto Sans JP;
font-style: normal;
font-weight: 700;
src: local("Noto Sans JP"),url(/assets/fonts/NotoSansJP-Bold.woff2) format("woff2"),url(/assets/fonts/NotoSansJP-Bold.woff) format("woff"),url(/assets/fonts/NotoSansJP-Bold.ttf) format("truetype"),url(/assets/fonts/NotoSansJP-Bold.otf) format("opentype")
}
今回は、font-familyの優先順だけを調整する。
自PCでNoto Sans JPをあらかじめ利用しているので、Noto Sans JPの優先度を上げて表示させる。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
'sans': ['Noto Sans JP', ...defaultTheme.fontFamily.sans],
},
}
}
}
今後の課題として、Webフォントを利用できないか検討したい。
ダウンロードするフォントのサイズを減らすためにあらかじめ使用するフォントウェイトの整理等、検討が必要なようだ。