【CSS】font-weightとは？太字の指定方法や効かない原因

font-weightは、文字の太さを指定するCSSプロパティです。よく使う値はnormal、bold、または400・700などの数値です。見出しを強く見せたり、重要な文言を目立たせたりする場面でよく使います。しかし、font-weight: 700;を書いたのに太くならない、boldとstrongの違いがわからない、100〜900の数値をどう使えばいいのか迷う方も多いはずです。

この記事では、基本の書き方、数値指定の考え方、太字が効かない原因、実務での使い分けまで解説します。

CSSのfont-weightとは？
1. 基本の指定はnormalとbold
font-weightの数値指定 100〜900 の違い
1. 400がnormal、700がboldの目安
strongタグとfont-weightの違い
1. 意味が重要ならstrong、見た目だけならCSS
font-weightが効かない原因と対策
応用：見出し（hタグ）の太字を通常に戻したい場合
実務で使いやすいfont-weightの設計例
1. 公式ドキュメントも確認する
まとめ：font-weightは意味と見た目を分けて使おう

CSSのfont-weightとは？

font-weightとは、文字の太さを指定するCSSです。

.lead {
  font-weight: bold;
}

この例では、.leadの文字が太字になります。

基本の指定はnormalとbold

初心者の方は、まずnormalとboldを覚えれば問題ありません。

値	意味	よく使う場面
`normal`	通常の太さ	本文、補足文
`bold`	太字	見出し、重要文、ボタン

p {
  font-weight: normal;
}

.important {
  font-weight: bold;
}

まずは本文をnormal、強調したい箇所をboldにするだけでも、文字のメリハリは十分に作れます。

関連記事：「CSSのfont-family一覧とおすすめ指定例を解説」

font-weightの数値指定 100〜900 の違い

font-weightは、キーワードだけでなく数値でも指定できます。

.title {
  font-weight: 700;
}

数値は100〜900の範囲で指定します。数字が大きいほど太くなります。

数値	目安	使う場面
`300`	細め	大きな見出し、上品な印象のテキスト
`400`	通常	本文
`500`	やや太め	小見出し、ナビゲーション
`700`	太字	見出し、強調、ボタン
`900`	かなり太い	短いキャッチコピー、数字

400がnormal、700がboldの目安

多くの場合、font-weight: 400;はnormal、font-weight: 700;はboldに相当します。

.text {
  font-weight: 400;
}

.heading {
  font-weight: 700;
}

100〜900を指定しても、使用しているフォントがその太さを持っていない場合は、見た目の差が出にくいことがあります。

strongタグとfont-weightの違い

HTMLのstrongタグも太字に見えるため、font-weightと混同しやすいです。

指定	役割	使う場面
`<strong>`	意味として重要であることを示す	文章内の重要語句
`font-weight`	見た目の太さを変える	デザイン調整、見出し、ボタン

意味が重要ならstrong、見た目だけならCSS

文章の意味として重要な箇所にはstrongを使い、単に見た目を太くしたい場合はCSSでfont-weightを指定します。

【HTML】

<p>
  この設定では<strong>保存形式をUTF-8にすること</strong>が重要です。
</p>

【CSS】

strong {
  font-weight: 700;
}

strongはHTMLの意味、font-weightはCSSの見た目です。役割を分けて使うとSEOやアクセシビリティの面でも自然です。

関連記事：「HTMLのspanタグとは？CSSでの使い方を解説」

font-weightが効かない原因と対策

font-weightが効かない場合は、CSSの書き方だけでなく、フォント側の対応も確認しましょう。

原因1：その太さのフォントが読み込まれていない

Webフォントを使っている場合、読み込んでいない太さは正しく表示されません。

【NG例】

/* 400だけ読み込んでいるのに700を指定している */
.title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

Google Fontsなどでは、400と700の両方を読み込む必要があります。

【OK例】

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

原因2：日本語フォントの太さの差が少ない

日本語フォントは、英字フォントに比べて太さの差が分かりにくいことがあります。特に本文サイズが小さい場合、500と700の差がほとんど見えないこともあります。

太字が弱く見えるからといって、すべてを900にすると読みづらくなります。見出し、本文、強調の役割ごとに太さを分けましょう。

原因3：別のCSSに上書きされている

WordPressテーマやブロックエディターのCSSで、後からfont-weightが上書きされることがあります。

.post-content strong {
  font-weight: 600;
}

検証機能で、どのCSSが最終的に効いているか確認しましょう。

原因4：そもそもフォントがその太さ（ウエイト）に対応していない

Google FontsなどのWebフォントではなく、PCやスマホに最初から入っている「システムフォント」や「フリーフォント」を使う場合に多い原因です。

フォントの種類によっては、そもそも400（Regular）の1種類しか用意されておらず、700（Bold）や900のファイル自体が存在しないケースがあります。

フォントがない場合のブラウザの挙動

CSSでfont-weight: 700;と指定しているのに、その太さのフォントファイルが存在しない場合、ブラウザが自動的に文字を横に引き伸ばして無理やり太く見せる「擬似ボールド」という処理が行われます。これにより、文字の輪郭がにじんで不格好に見えたり、ブラウザによっては「まったく太さが変わらない」という現象が起きてしまいます。

デザイン通りに綺麗な太字を表現したい場合は、あらかじめ複数のウエイト（400、500、700など）が用意されているフォント（Noto Sans JPやヒラギノ角ゴなど）を正しく選定する必要があります。

関連記事：「HTMLのspanにCSSが効かない原因とは？優先順位を解説」

応用：見出し（hタグ）の太字を通常に戻したい場合

font-weightは文字を太くするだけでなく、「最初から太字になっている要素を、普通の太さに戻す」という目的でも実務でよく使われます。

HTMLの<h1>〜<h6>などの見出しタグや、<strong>タグは、CSSを何も書かなくてもブラウザの仕様で最初から太字（bold）で表示されます。

「デザインカンプ（設計図）ではすっきりした細い見出しになっているから、通常の太さに戻したい」という場合は、以下のようにnormal（または400）を指定して太字を打ち消します。

/* 見出しのデフォルトの太字を解除する */
h2 {
  font-weight: normal; /* または 400 */
}

実務のWeb制作では、「太くする指定」と同じくらい「デフォルトの太字を通常に戻す指定」も頻出するため、セットで覚えておくとコーディングの幅が広がります。

実務で使いやすいfont-weightの設計例

実務では、すべての太さを使うより、役割ごとに数値を決めておくと管理しやすくなります。

body {
  font-weight: 400;
}

.section-title {
  font-weight: 700;
}

.nav-link {
  font-weight: 500;
}

.button {
  font-weight: 700;
}

要素	おすすめ	理由
本文	`400`	長文でも読みやすい
小見出し	`600〜700`	本文との差が出る
ボタン	`700`	クリック要素として目立つ
補足文	`400`	主張しすぎない