CSSで font-weight を指定しているにもかかわらず、文字の太さが変わらないという問題は、Web制作の現場で非常によく遭遇します。bold を指定しても見た目が変わらなかったり、数値指定をしても同じ太さのまま表示されたりする原因は、CSSの書き方そのものではなく、フォントや読み込み方法、継承関係にあるケースがほとんどです。本記事では、フォントの太さが効かない代表的な原因を整理し、実務で確実に解決するための考え方を解説します。
フォント自体に指定した太さが存在しない
最も多い原因は、使用しているフォントに指定した font-weight がそもそも用意されていないことです。多くのWebフォントやシステムフォントは、Regular と Bold など限られた太さしか持っていません。その状態で 500 や 600、700 といった数値を指定しても、ブラウザは存在する最も近い太さを選択するため、見た目が変わらないように見えます。
特に Google Fonts を利用している場合、読み込んでいないウェイトは使用できません。CSS側で指定しても、フォントファイルがなければ反映されない点を理解しておく必要があります。
Webフォントの読み込みウェイトが不足している
Webフォントを使用している場合、font-weight が効かない原因の多くは「読み込んでいない太さを指定している」ことです。例えば、Regular（400）だけを読み込んでいる状態で bold（700）を指定しても、実際には 400 のまま表示されます。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
使用したい太さは、必ずフォントの読み込み時点で明示的に指定する必要があります。パフォーマンスを意識して読み込み数を絞る場合も、使うウェイトだけは確実に含める設計が重要です。
font-weightの数値とboldの違いを誤解している
font-weight には normal や bold だけでなく、100〜900 の数値指定があります。しかし、この数値は必ずしも連続的にすべての太さが存在することを意味しません。フォント側が対応しているウェイトのみが実際に反映されます。
そのため、400 と 500 を切り替えても見た目が変わらない場合は、そのフォントが 500 を持っていない可能性が高いと言えます。これはCSSの仕様どおりの挙動です。
親要素の指定が上書きしている
font-weight は継承されるプロパティです。親要素で font-weight が指定されている場合、子要素の指定がカスケードや詳細度の関係で上書きされていることがあります。特に共通スタイルやリセットCSS、ユーティリティクラスを使っている場合は注意が必要です。
開発者ツールで該当要素を確認し、どの CSS が最終的に適用されているかを確認することが、原因特定の近道になります。
font-familyの切り替えによる影響
font-weight が効かないと思っていた原因が、実は font-family のフォールバックによるもの、というケースもあります。指定したフォントが読み込めていない場合、別のフォントに切り替わり、そのフォントでは太さの差がほとんど見えないことがあります。
この場合、font-weight 自体は適用されていても、見た目の差が感じられないため「効いていない」と誤解しやすくなります。
擬似的な太字は自動生成されない
一部の環境では、Bold フォントが存在しない場合に擬似的な太字が生成されることがありますが、これは保証された挙動ではありません。特に Webフォントでは、擬似ボールドは基本的に行われず、存在するウェイトのみが使用されます。
そのため、「太くしたいなら必ずその太さのフォントを用意する」という前提で設計する必要があります。
SVGやcanvas内のテキストの場合
SVG や canvas 内のテキストは、通常の HTML/CSS の font-weight と挙動が異なる場合があります。特に SVG では、使用できるフォントや太さが制限され、CSS側の指定が無視されるケースもあります。この場合は SVG 側の font-weight 指定や、使用フォントの対応状況を確認する必要があります。
実務での確認手順
フォントの太さが効かない場合は、まず使用フォントがその太さを持っているかを確認し、次に Webフォントの読み込み指定、CSSの上書き関係、font-family の適用状況を順に確認します。この順番で切り分けることで、無駄な試行錯誤を避けることができます。
まとめ
font-weight が効かない原因の多くは、CSSの記述ミスではなく、フォントの仕様や読み込み設定にあります。指定した太さがフォントとして存在するか、実際に読み込まれているかを理解したうえで設計することが重要です。見た目だけで判断せず、フォントとCSSの役割を正しく切り分けることで、意図どおりの文字表現を安定して実現できます。
