font-weightが効かない場合の原因と対処法を解説！

CSSのfont-weightは文字の太さを設定するプロパティで、初期値はnormalで値は100〜900（数字が大きいほど太い）やnormal、boldなどキーワードで設定することが出来ます。

例えば下記の例ではfont-weightが100〜900までで文字の太さ毎に設定を変えた例になります。

しかし、ときにfont-weightを設定しているはずなのに、文字の太さが変わらないという場合があります。

そこで今回はfont-weightが効かない場合の原因と対処法を解説していきます。

font-weightが効かない原因はいくつか考えられますので、順番に解説していきます。

CSSのスタイルの優先順位でfont-weightが効かないという場合です。

font-weightを太字や細字で設定している箇所とは別で、font-weightを設定しているところがあり、そちらが優先されているため片方の指定が無効になっているケースです。

この場合まず切り分けとしてChromeのデベロッパーツールで該当の要素にフォーカスをあてスタイルの上書きが発生していないか確認しましょう。

上記に該当する場合は、スタイルの優先度の見直しをして問題を解決しましょう。CSSのスタイルの優先順位を変更する方法については下記を参考にして下さい。

また優先順位を考えず、手っ取り早くfont-weightを適用したいという方は!importantを値に付加して強制的に適用させる方法もあります。

!importantを使う方法については下記を参考にしましょう。

次にテキストに設定しているフォント自体で太字に対応していない場合です。その場合はfont-weight: boldを設定しても設定上は太字になりますが、フォント側で太字に対応したフォントがなく表示が太字となりません。

この場合ですが、少し裏技となりますが、text-shadowを付けて強制的に太字に見せる方法があります。

上記の例ではfont-weight: boldなど太字の指定をfont-weightで行わず、text-shadowを使って太字に見せています。

このやり方であればフォントが太字に対応していない場合でも太字に見せる事が出来ます。