# CSS: “font-style”: “bold” is not a “font-style” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-style-bold-is-not-a-font-style-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `font-style` and `font-weight` properties serve different purposes. `font-style` controls whether text appears in a normal, italic, or oblique style, while `font-weight` controls how thick or thin the characters are rendered. Writing `font-style: bold` is a mistake because `bold` is not among the accepted values for `font-style`. Browsers will ignore the invalid declaration entirely, meaning your text won't become bold at all — it will simply render in the default weight.

This error typically comes from confusing the two properties or misremembering which property handles boldness. The valid values for each property are:

- **`font-style`**: `normal`, `italic`, `oblique`, or `oblique` with an angle (e.g., `oblique 10deg`)
- **`font-weight`**: `normal`, `bold`, `bolder`, `lighter`, or numeric values from `100` to `900`

To fix this issue, replace `font-style: bold` with `font-weight: bold`. If you intended to make text both bold *and* italic, you'll need to use both properties separately.

## Examples

### Incorrect — using `bold` with `font-style`

This triggers the validation error because `bold` is not a valid `font-style` value:

```html
<p style="font-style: bold;">This text won't actually be bold.</p>
```

### Correct — using `font-weight` for boldness

Move the `bold` value to the `font-weight` property:

```html
<p style="font-weight: bold;">This text is bold.</p>
```

### Correct — combining bold and italic

If you want text that is both bold and italic, use both properties:

```html
<p style="font-weight: bold; font-style: italic;">This text is bold and italic.</p>
```

### Correct — using `font-weight` in a stylesheet

You can also apply bold styling through a `<style>` block or external stylesheet, using either keyword or numeric values:

```html
<style>
  .emphasis {
    font-weight: bold;
  }
  .light {
    font-weight: 300;
  }
  .heavy {
    font-weight: 900;
  }
</style>

<p class="emphasis">This text is bold (weight 700).</p>
<p class="light">This text is light (weight 300).</p>
<p class="heavy">This text is extra heavy (weight 900).</p>
```

Note that the keyword `bold` is equivalent to the numeric value `700`, and `normal` is equivalent to `400`. Numeric values give you finer control over text weight, especially when using variable fonts or font families that offer multiple weight variations.