---
title: "フォントが太字・斜体にならないときの対処"
description: "font-weight: bold を指定しても見た目が変わらない、またはぼやけた太字になってしまう。Web フォントの太字・斜体は対応するフォントデータが必要です。仕組みを理解して確実に適用するための確認手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/webfont-bold-not-applied"
markdown: "https://giga-site.com/articles/webfont-bold-not-applied/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# フォントが太字・斜体にならないときの対処

見出しを太字にしたいのに、font-weight: bold を指定しても見た目が変わらない、または妙にぼやけて太く見える。Webフォントの太字・斜体は、その太さ・斜体のデータが読み込まれているかどうかで挙動が変わります。仕組みを押さえれば解決できます。

> Source HTML: https://giga-site.com/articles/webfont-bold-not-applied
> Article index: https://giga-site.com/articles/index.md

## なぜ太字にならないのか

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のままファイルを差し替えて再確認してもらえます。

## よくある質問

### font-weight: bold を指定したのに太くなりません

そのフォントの太字データを読み込んでいない可能性が高いです。@font-faceで太字（700など）のファイルを追加し、font-weightの宣言をファイルの実体と一致させてください。

### 太くはなったのですが文字がにじんで汚いです

正規の太字データがなく、ブラウザが機械的に太らせる合成太字になっている状態が考えられます。きれいに表示するには、その太さの正規フォントデータを読み込みます。

### 斜体が単に傾いただけに見えます

italicの正規データを読み込んでいないと、ブラウザが文字を傾けるだけの合成斜体になります。フォントのitalicスタイルを別途読み込むことで、本来デザインされた斜体になります。

### 相手の環境で太字が正しく出るか確認したいです

ギガサイト便でフォントを含むZIPごと共有すれば、相手は自分のブラウザで実際の太字・斜体の見え方を確認できます。指定を直したら同じURLのまま差し替えて再確認してもらえるため、環境差の検証に向いています。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [書いたCSSが別のスタイルに上書きされて当たらないときの対処](https://giga-site.com/articles/css-specificity-not-applied/index.md)
- [影（box-shadow）や角丸が効かないときの原因と対処](https://giga-site.com/articles/shadow-or-border-radius-not-applied/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "フォントが太字・斜体にならないときの対処",
  "description": "font-weight: bold を指定しても見た目が変わらない、またはぼやけた太字になってしまう。Web フォントの太字・斜体は対応するフォントデータが必要です。仕組みを理解して確実に適用するための確認手順を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/webfont-bold-not-applied",
  "url": "https://giga-site.com/articles/webfont-bold-not-applied",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "font-weight: bold を指定したのに太くなりません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのフォントの太字データを読み込んでいない可能性が高いです。@font-faceで太字（700など）のファイルを追加し、font-weightの宣言をファイルの実体と一致させてください。"
      }
    },
    {
      "@type": "Question",
      "name": "太くはなったのですが文字がにじんで汚いです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "正規の太字データがなく、ブラウザが機械的に太らせる合成太字になっている状態が考えられます。きれいに表示するには、その太さの正規フォントデータを読み込みます。"
      }
    },
    {
      "@type": "Question",
      "name": "斜体が単に傾いただけに見えます",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "italicの正規データを読み込んでいないと、ブラウザが文字を傾けるだけの合成斜体になります。フォントのitalicスタイルを別途読み込むことで、本来デザインされた斜体になります。"
      }
    },
    {
      "@type": "Question",
      "name": "相手の環境で太字が正しく出るか確認したいです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便でフォントを含むZIPごと共有すれば、相手は自分のブラウザで実際の太字・斜体の見え方を確認できます。指定を直したら同じURLのまま差し替えて再確認してもらえるため、環境差の検証に向いています。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```