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

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

The `font-stretch` property selects a normal, condensed, or expanded face from a font family. Its valid keyword values are `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `normal`, `semi-expanded`, `expanded`, `extra-expanded`, and `ultra-expanded`. It also accepts percentage values (e.g., `50%` to `200%`). The value `bold` doesn't fit into any of these categories because it describes font **weight** (thickness of strokes), not font **width** (how narrow or wide the characters are).

This error usually happens due to one of two mistakes:

1. **Confusing `font-stretch` with `font-weight`:** You intended to make text bold but accidentally used the wrong property.
2. **Typo or copy-paste error in the `font` shorthand:** When writing shorthand font declarations, the various sub-properties can easily get mixed up.

The W3C validator flags this because browsers will ignore invalid CSS values, meaning your intended styling won't be applied. Fixing it ensures your styles work as expected across all browsers and pass validation.

## How to Fix It

- If you want **bold text**, use `font-weight: bold` (or numeric values like `700`).
- If you want **wider or narrower characters**, use `font-stretch` with a valid value like `condensed` or `expanded`.
- If you need both, apply each property separately or use the `font` shorthand correctly.

## Examples

### Incorrect: Using `bold` with `font-stretch`

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

```html
<p style="font-stretch: bold;">This text won't render as expected.</p>
```

### Fixed: Using `font-weight` for boldness

If the intent was to make the text bold, switch to `font-weight`:

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

### Fixed: Using `font-stretch` correctly for width

If the intent was to adjust the character width, use a valid `font-stretch` value:

```html
<p style="font-stretch: expanded;">This text uses an expanded font face.</p>
```

### Using both properties together

You can combine `font-weight` and `font-stretch` when you need both bold text and a different font width:

```html
<style>
  .styled-text {
    font-weight: bold;
    font-stretch: condensed;
    font-family: Arial, sans-serif;
  }
</style>

<p class="styled-text">This text is bold and condensed.</p>
```

### Valid `font-stretch` values reference

Here's a quick overview of all valid keyword values for `font-stretch`:

```html
<style>
  .condensed { font-stretch: condensed; }
  .normal-width { font-stretch: normal; }
  .expanded { font-stretch: expanded; }
  .custom-width { font-stretch: 75%; }
</style>

<p class="condensed">Condensed text</p>
<p class="normal-width">Normal width text</p>
<p class="expanded">Expanded text</p>
<p class="custom-width">75% width text</p>
```

Note that `font-stretch` only works if the selected font family includes condensed or expanded faces. If the font doesn't have these variations, the property will have no visible effect even with valid values.