Webフォントを使ったサイト制作では、font-weight を指定しているにもかかわらず、文字の太さが思ったように変わらないという問題が頻繁に発生します。この原因の多くは、CSSの書き方ではなく、Webフォントと font-weight の関係を正しく理解できていないことにあります。特に Google Fonts などを利用する場合、フォントファイルの読み込みと CSS 指定は密接に結びついており、どちらか一方が欠けるだけで意図した表示になりません。本記事では、font-weight と Webフォントの関係を整理し、実務で失敗しないための考え方を解説します。
font-weightはフォントの太さを切り替える指定
font-weight は、文字を太くしたり細くしたりするためのCSSプロパティですが、実際には「フォントが持っている太さの中から、どれを使うか」を指定しているに過ぎません。CSS 側で自由に太さを生成しているわけではなく、フォントファイルに用意されているウェイトのみが使用されます。
そのため、font-weight: 700 を指定しても、そのフォントに 700 相当のウェイトが存在しなければ、見た目はほとんど変わらないか、400 相当の太さで表示されることになります。
Webフォントは読み込んだウェイトしか使えない
Webフォントでは、使用可能な太さは「読み込んだフォントファイル」に完全に依存します。たとえば Google Fonts を利用している場合、リンクタグや @import で指定した wght の値だけが有効になります。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
この例では、400 と 700 の2種類の太さしか利用できません。CSSで 500 や 600 を指定しても、実際には最も近いウェイトに丸められるため、太さの変化が感じられないことがあります。
数値指定とnormal・boldの関係
font-weight には normal や bold といったキーワード指定と、100〜900 の数値指定があります。normal は通常 400、bold は通常 700 に対応しますが、これはあくまで慣例的な対応であり、フォントによってはこの対応が異なる場合もあります。
数値指定を行った場合でも、フォント側がそのウェイトを持っていなければ意味を持ちません。CSSとしては正しくても、表示結果が変わらない理由はここにあります。
可変フォント（Variable Font）の場合
近年増えている可変フォントでは、1つのフォントファイルの中に連続した太さ情報が含まれています。この場合、font-weight の数値指定が比較的滑らかに反映されます。
body {
font-family: "Inter", sans-serif;
font-weight: 350;
}
ただし、可変フォントであっても、対応している軸や範囲はフォントごとに異なります。対応範囲外の値を指定すると、やはり最も近い太さに丸められます。
Webフォント未読込時のフォールバック挙動
指定した Webフォントが何らかの理由で読み込まれなかった場合、ブラウザはフォールバックフォントを使用します。このフォントが太さの差を持たない、あるいは差が分かりにくいフォントであると、font-weight が効いていないように見えます。
この場合、CSS上は font-weight が適用されていても、視覚的な差が出ないため、原因の切り分けが難しくなります。開発者ツールで実際に適用されている font-family を確認することが重要です。
擬似ボールドに頼れない理由
デスクトップアプリケーションでは、Bold が存在しない場合に擬似的な太字が生成されることがありますが、Webフォントではこの挙動は基本的に期待できません。ブラウザは、存在しないウェイトを無理に生成せず、最も近い実在ウェイトを使います。
そのため、太さの違いを表現したい場合は、必ず必要なウェイトをフォントとして用意し、読み込むことが前提になります。
実務で意識すべき設計ポイント
Webフォントを使う場合は、まずどの太さを使うのかを設計段階で決め、そのウェイトだけを読み込むのが基本です。すべてのウェイトを読み込むとパフォーマンスに悪影響が出るため、font-weight の指定とフォント読み込みは常にセットで考える必要があります。
また、数値指定を多用する場合は、可変フォントの採用を検討することで、表現の自由度と管理のしやすさを両立できます。
まとめ
font-weight は単体で完結するCSSプロパティではなく、Webフォントの仕様と読み込み設定に強く依存します。指定した太さがフォントとして存在し、かつ正しく読み込まれていなければ、CSSの指定は反映されません。Webフォントを使う際は、font-weight とフォントファイルを一体として設計し、意図した太さが確実に表示される構成を作ることが重要です。
