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

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

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

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

Valid example

<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.

Learn more:

MDN Reference

CSS font-family property - MDN Web Docs

→

MDN Reference

CSS inherit keyword - MDN Web Docs

→