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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-family-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/)

A `font-family` list contains something that is not a font name, most often a CSS-wide keyword such as `inherit` placed next to other families.

`font-family` takes a comma-separated list of family names, like `"Open Sans", Arial, sans-serif`, usually ending in a generic family such as `serif`, `sans-serif` or `monospace`. The CSS-wide keywords `inherit`, `initial`, `unset` and `revert` are also valid, but only as the entire value. `font-family: inherit` passes; `font-family: inherit, sans-serif` and `font-family: Arial, inherit` fail, and the validator names the keyword in the message. Browsers ignore the whole declaration, so the element gets whatever font it would have without that rule.

The same message appears when a size or a weight ends up in the list, as in `font-family: 16px Arial` or `font-family: "Open Sans", 700`. Those values belong in `font-size` and `font-weight`, or in the `font` shorthand, which takes them before the family.

To fix it, use `inherit` on its own when the element should take its parent's font, or list real family names with a generic family at the end. A keyword added as a last-resort fallback does nothing useful, because the generic family already covers the case where none of the named fonts is available.

## Invalid example

```html
<style>
  .card {
    font-family: inherit, sans-serif;
  }

  .note {
    font-family: 16px Arial;
  }
</style>
```

## Valid example

```html
<style>
  .card {
    font-family: inherit;
  }

  .note {
    font-size: 16px;
    font-family: Arial, sans-serif;
  }
</style>
```

`.card` uses `inherit` alone, and the size on `.note` has its own `font-size` declaration.