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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-style-x-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` CSS property controls whether text is displayed in a normal, italic, or oblique face from its `font-family`. It has a limited set of accepted values, and the W3C validator will flag any value that falls outside this set.

This error commonly occurs for a few reasons:

- **Confusing `font-style` with `font-size`:** Since both properties start with `font-`, it's easy to accidentally type `font-style: 1.2em` when you meant `font-size: 1.2em`. Numeric and length values are not valid for `font-style`.
- **Confusing `font-style` with `font-weight`:** Writing `font-style: bold` is invalid because `bold` is a `font-weight` value, not a `font-style` value.
- **Typos in keyword values:** Misspelling a valid keyword, such as `font-style: itallic` or `font-style: oblque`, will trigger this error.
- **Using the `oblique` angle syntax incorrectly:** While `oblique` can accept an optional angle (e.g., `oblique 10deg`), providing an angle without the `oblique` keyword or using an invalid unit will cause a validation error.

Using invalid CSS values can lead to unpredictable rendering across browsers. Most browsers will ignore the entire declaration when they encounter an invalid value, meaning your intended styling won't be applied at all. Keeping your CSS valid ensures consistent behavior and makes debugging easier.

### Valid `font-style` values

The accepted values for `font-style` are:

- `normal` — displays the normal face of the font family.
- `italic` — selects the italic face; falls back to `oblique` if unavailable.
- `oblique` — selects the oblique face; optionally accepts an angle value (e.g., `oblique 10deg`). The angle defaults to `14deg` if omitted.
- Global CSS values: `inherit`, `initial`, `revert`, `revert-layer`, `unset`.

## Examples

### Incorrect: size value applied to `font-style`

This is the most common mistake — using a length value that belongs on `font-size`:

```html
<p style="font-style: 1.2em;">This text has an invalid font-style.</p>
```

### Correct: use `font-size` for size values

```html
<p style="font-size: 1.2em;">This text has a valid font size.</p>
```

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

```html
<p style="font-style: bold;">This text has an invalid font-style.</p>
```

### Correct: use `font-weight` for boldness

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

### Incorrect: misspelled keyword

```html
<p style="font-style: itallic;">This text has a typo in font-style.</p>
```

### Correct: properly spelled keyword

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

### Correct: using `oblique` with an angle

```html
<p style="font-style: oblique 12deg;">This text is oblique at 12 degrees.</p>
```

### Quick reference for commonly confused properties

If you're unsure which property to use, here's a quick guide:

| You want to change… | Use this property | Example value |
|---|---|---|
| Italic or oblique text | `font-style` | `italic`, `oblique` |
| Text size | `font-size` | `1.2em`, `16px` |
| Text boldness | `font-weight` | `bold`, `700` |
| Text decoration | `text-decoration` | `underline`, `line-through` |