ページ内の見出しなどで太字を使いたいとき、十分な太さを出せる日本語フォントはNoto Sans JPとメイリオ。しかし、メイリオは美しさに欠け、vertical-alignがやや特殊な印象。
したがって、事実上、Noto Sans JPが選択肢として残る。
ところが、Noto Sans JPはWebフォントのため、多用すると読み込みが甘くなる。次善策としては、Noto Sans JP weight 900をのみを読み込み、太字にしたい要素のみclassでNoto Sans JP weight 900を指定する方法。
本文など低ウェイトの要素はシステムフォントで表示し、太字にしたい要素だけfont-familyを変更する。
<!-- 見出し用に 900 だけ読み込む（例：Noto Sans JP）-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap" rel="stylesheet">
/* 本文はシステムフォントで軽量 */
body{
font-family: system-ui, -apple-system, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/* 見出しだけ実体のある太字（偽ボールド禁止） */
.bold {
font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 900; /* 700 or 800 or 900 */
font-synthesis: none; /* ←偽ボールド無効化（超大事）*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.2; /* 見出しは詰まり防止で明示 */
}
