フォントが太字・斜体にならないときの対処

なぜ太字にならないのか

font-weightやbタグで太字を指定しても変わらない主因は、そのフォントの「太字データ」が読み込まれていないことです。Webフォントは太さ（ウェイト）ごとに別のファイルとして提供されることが多く、レギュラーだけ読み込んでいると、太字を指定しても適用すべきデータが存在しません。

斜体も同じ構造です。italicのデータを読み込んでいなければ、font-style: italic を指定しても本来の斜体にはなりません。まずは「指定した太さ・スタイルのデータを読み込んでいるか」を出発点に確認します。

合成書体（フェイクボールド）に注意

太字データがないのに太字を指定すると、ブラウザが文字を機械的に太らせる「合成太字（フェイクボールド）」になることがあります。これは正規の太字データではないため、にじんだり、つぶれたり、文字によって太り方が不均一になったりします。

「太くはなったが汚い」と感じたら、合成書体を疑ってください。斜体側の「合成斜体（フェイクイタリック）」も同様で、文字をただ傾けただけになり、デザインされた本来の斜体とは別物です。きれいに出したいなら、正規のウェイト・スタイルのデータを読み込むのが正解です。

症状別チェック表

フォントが太字・斜体にならないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

font-weightの値と読み込みの対応

font-weightは100から900の数値や、normal（400相当）・bold（700相当）で指定します。重要なのは、指定した数値に対応するウェイトのデータを実際に読み込んでいるかです。@font-faceで読み込むフォントには、そのファイルが表すウェイトを font-weight で正しく宣言しておく必要があります。

宣言とファイルの対応がずれていると、太字を指定しても効かなかったり、別の太さが当たったりします。複数のウェイトを使うなら、ウェイトごとに@font-faceを用意し、それぞれ正しいfont-weightを割り当てます。可変フォント（バリアブルフォント）を使う場合は、対応するウェイト範囲が含まれているかを確認します。

確認と修正の手順

原因の切り分けは次の順で進めると確実です。

1. 使いたい太字・斜体のフォントデータを実際に読み込んでいるか確認する
2. @font-face の font-weight・font-style 宣言が、読み込むファイルの実体と一致しているか確認する
3. 太くなるが汚い場合は合成太字を疑い、正規の太字データを追加で読み込む
4. 斜体が傾いただけに見える場合は、italicのデータを読み込む
5. 可変フォントの場合は、必要なウェイト範囲・スタイルが含まれているか確認する

見え方を実機で確認してもらう

フォントの太字・斜体は、自分の環境にそのフォントが入っているかどうかで見え方が変わることがあります。手元では正しく見えても、フォントが入っていない相手の環境では合成書体になっている、ということも起こり得ます。実際の利用環境で確認してもらうのが確実です。

ギガサイト便はHTMLやフォントを含むZIPをドロップすると共有URLを発行し、CDNのエッジ配信で表示します。相手は自分のブラウザで実際の太字・斜体の見え方を確認でき、@font-faceの指定を直したら同じURLのままファイルを差し替えて再確認してもらえます。