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

A value in a CSS font shorthand sits in a position the shorthand's syntax doesn't allow, so browsers ignore the whole declaration.

The font shorthand reads its values in a fixed order. The optional style, variant, weight and width keywords come first, in any order among themselves. Next comes the font size, which can be followed by a slash and a line height, and the font family list goes last. A global keyword such as inherit or initial has to be the only value.

The validator quotes the first value it can't fit into that order. A second length after the size is the most common case: a line height written without its slash, as in font: 11px 12px Arial, or a size typed twice. A family name placed before the size (font: Arial 12px) or inherit combined with other values produces the same message, with that name or keyword quoted instead.

Because the browser drops the declaration as a whole, none of its parts apply. The element keeps the size, line height and family it inherits, and the weight or style in the same declaration is lost too.

To fix it, put a slash between the size and the line height, remove the extra value, or move the family list to the end. When only one or two parts need to change, the longhand properties such as font-size and line-height avoid the ordering problem altogether.

Invalid example

<style>
  .note {
    font: bold 11px 12px Arial, sans-serif;
  }
</style>

Valid example

<style>
  .note {
    font: bold 11px/12px Arial, sans-serif;
  }
</style>

Learn more:

MDN Reference

MDN Web Docs: font

→

MDN Reference

MDN Web Docs: line-height

→

W3C Reference

CSS Fonts Module Level 4

→