CSSのfont-weight:boldが指定された際に選ばれるフォントの太さは700です。
Google fontsのフォントに代表されるWebフォントには様々なfont-weightが用意されているものがあります。
例えば、Google fontsのNoto Sansは、font-weight:100～900まで9段階用意されています。
WebサイトのCSSではfont-weightはnormalかboldの2種類で指定されることがほとんどなので、Google fontsを読み込む場合は、font-weithは400（normal）、700（bold）の2つあれば十分です。
しかし、boldの指定を700ではなく、もっと小さなfont-weightに変更したい時にどうしたらよいでしょうか？
font-weight:boldの指定を数値に書き換える（面倒）
指定のfont-weightのWebフォントを読み込んで、CSSで指定されているfont-weight:boldの箇所を数値で指定するように変更すればいいです。
自分で作成したテーマならそれでもいいかもしれません。
しかし、既存のテーマでboldで指定されているすべてを上書きして修正するのはかなり大変な作業ですし、漏れも起こりやすいです。
そもそもboldの定義を700⇒600とかに変更できれば問題ないのですが、CSSにはそういう仕組みは用意されていません。
CSSのfont-weightの適用されるアルゴリズムというのがありまして、それを真面目に確認してみると、boldの定義を変更するのと同じように、boldで指定された箇所のfont-weightを一括で変更できることがわかりました。
weight 700のフォントが無い時にbold指定をすると？
CSSのfont-weightで指定されたweightのフォントが無い場合、利用できるweightのフォントをどう選んで適用されるかアルゴリズムが決まっています。
指定された太さのフォントが無い時に代りの太さを選ぶアルゴリズム
太さの代替
正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
- 対象となる太さがが
400～500で指定された場合
- 利用できる太さを、対象値から
500までの間で昇順で探します。- 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
- 一致するものがなければ、
500より大きい太さを昇順で探します。- 太さが
400未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。- 太さが
500より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
font-weight:boldの指定を太さ600にするには？
boldの太さは700です。太さ700のフォントが存在しない場合、次のルールで代りの太さが選ばれますので、bold指定で読み込まれる太さを変更することができます。
太さが
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight500より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
太さ700のフォントを読み込まず、代わりに太さが600のフォントを読み込めば、bold指定した時に太さが600のフォントがbold指定で選ばれるようになります。
動きを確認していきましょう。
まず、font-weight:bold（700）が指定されたとき、太さ700のフォントが無い場合は次のように変わりの太さ選ばれます。
boldは太さが700なので、太さが500以上に該当するため、太さ700以上のフォントを小さい順に探していきます。
そこで見つかれば、その太さがboldで使われますが、存在しない場合は、700以下のフォントを大きい順に探していきます。
そこで見つかればその太さがboldで使われます。
上記の通り、bold指定（太さ700）がされた時に、太さ700以上のフォントが読み込まれていない状態では、700以下に一番近い太さ600が選ばれます。
font-weight:normalの指定を太さを300にするには？
normalは太さ400です。太さ400のフォントが存在しない場合、次のルールで代りの太さが選ばれますので、normal指定で読み込まれる太さを変更することができます。
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
- 対象となる太さがが
400～500で指定された場合
- 利用できる太さを、対象値から
500までの間で昇順で探します。- 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
- 一致するものがなければ、
500より大きい太さを昇順で探します。
太さ400のフォントを読み込む代わりに、太さ300のフォントを読み込めば、normal指定された時に太さ300のフォントが適用されることになります。
まとめ
既存のテーマのfont-weightの指定を一括で変更したい場合、いちいち上書きするのではなく、読み込むフォントの太さを変更することで、CSSが変わりの太さを選んでくれるようになります。
これを覚えておくと、サイト見た目を調整したい時など便利だと思います。
