【CSS】欧文書体と和文書体で異なるfont-weightの記述の仕方

Question

Adobe Typekit を使い、日本語と英語で事なる書体を使っています。
見出しの太さを、太めから細めになるように、
font-weightを和文書体では「400」を使い、
欧文書体では「300」を使おうと考え、下記の指定を行いました。

body {
  font-family: "sofia-pro-soft","dnp-shuei-mgothic-std";
  /* "sofia-pro-soft" -> 欧文書体 | Sofia Pro Soft  */
  /* "dnp-shuei-mgothic-std" -> 和文書体 | DNP 秀英丸ゴシック Std */
}

h1, h2, h3, h4, p {
  font-weight: 300;
  /* 欧文書体で使えるweight -> 300, 400, 500, 700 */
  /* 和文書体で使えるweight -> 400, 600 */
}

両方「400」にすると欧文書体の方が太く見えるため「300」にしました。
自作のサンプルで検証した結果見た目上では自分の思い通りになったのですが、
これはブラウザ上の設定（?）が自動で和文書体を細い「400」にしてくれているという事でしょうか？

もし欧文書体の「600」と和文書体の「300」が見た目上で同じ太さの書体を
細くしたい場合どのように記述すれば良いのでしょうか？
ご意見伺えればと思います。よろしくお願いいたします。

Answer 1

欧文書体の 600 未満のウエイトを読み込まなければ font-weight: 300 としたとき欧文書体は 600 が読み込まれるのではないかと思います。

Comments

[shiosu]

ご回答ありがとうございます！
確かにそうですよね、、難しく考えすぎてしまったのかもしれません。
助かりました！

Answer 2

sassやstylusなどをつかってif文で条件分岐をしてみてはいかがでしょうか？

Comments

[shiosu]

ご回答ありがとうございます！
なるほど！そういう手もあるんですね。挑戦してみます。
助かりました！