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

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

The CSS `font` shorthand property has a specific syntax defined in the CSS specification. At minimum, it requires both a `font-size` and a `font-family` value. Optionally, you can prepend `font-style`, `font-variant`, and `font-weight`, and you can append a `line-height` value after the `font-size` using a slash separator. The full syntax looks like this:

```
font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
```

When the W3C validator reports that a value "is not a `font-family` value," it means the parser reached a point in the `font` declaration where it expected to find a font family name but instead found something it couldn't interpret as one. This often happens in two scenarios:

1. **Using `font` when you meant a specific property** — For example, writing `font: 300` when you only intended to set the font weight. The validator tries to parse `300` as a complete `font` value, and since there's no `font-size` or `font-family`, it fails.
2. **Incomplete `font` shorthand** — Providing some values but forgetting the mandatory `font-family` at the end, such as `font: 300 16px` without a family name.

This matters because browsers may ignore an invalid `font` declaration entirely, causing your text to render with default or inherited styles instead of what you intended. Keeping your CSS valid also ensures consistent behavior across different browsers and helps maintain clean, predictable stylesheets.

**How to fix it:**

- If you only need to set a single font-related property, use the specific property (`font-weight`, `font-size`, `font-style`, `font-variant`, or `font-family`) instead of the `font` shorthand.
- If you want to use the `font` shorthand, make sure you include at least `font-size` and `font-family`, and that all values appear in the correct order.
- Remember that the `font` shorthand resets any omitted font sub-properties to their initial values, so use it deliberately.

## Examples

### Incorrect: Using `font` to set only the weight

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

The validator reports that `300` is not a valid `font-family` value because the `font` shorthand expects at least a `font-size` and `font-family`.

### Correct: Using `font-weight` directly

```html
<p style="font-weight: 300;">This text has a light font weight.</p>
```

### Incorrect: Missing `font-family` in the shorthand

```html
<p style="font: italic 300 16px;">This is also invalid.</p>
```

Even though `font-style`, `font-weight`, and `font-size` are all present, the required `font-family` is missing.

### Correct: Complete `font` shorthand

```html
<p style="font: italic 300 16px/1.5 'Helvetica', sans-serif;">This is valid.</p>
```

This includes all components in the correct order: `font-style`, `font-weight`, `font-size`/`line-height`, and `font-family`.

### Correct: Minimal valid `font` shorthand

```html
<p style="font: 16px sans-serif;">Only size and family — the minimum required.</p>
```

### Correct: Using individual properties instead of the shorthand

```html
<p style="font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.5; font-family: 'Helvetica', sans-serif;">
  Each property set individually.
</p>
```

Using individual properties avoids the pitfalls of the shorthand and gives you explicit control without accidentally resetting other font sub-properties.