Writing
font: 600 14px/1 inherit Is Invalid, and Your Button Quietly Becomes 13.3px Arial
The declaration is dropped whole, and form controls fall back to the browser default because they never inherited the page font.
Writing
The declaration is dropped whole, and form controls fall back to the browser default because they never inherited the page font.
Notes
A heading in an internal panel was rendering at roughly half the size I set. No console error, no failed request, nothing in the network tab. It just looked slightly wrong in a way that is easy to blame on your own eyes.
The declaration was:
That line is invalid, and the browser threw all of it away.
is not usable as one component inside a shorthand. MDN puts it this way:
"The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit."
So on its own is legal. is not, because there is sitting in the family slot. CSS drops invalid declarations entirely, which means the weight and the size went with it. You do not get partial application, and you do not get a warning.
Here is what makes the symptom confusing. If an invalid declaration is dropped, you would expect the element to keep inheriting the page font, because is an inherited property. On a paragraph, that is what happens and you barely notice.
The elements in my case were controls. Buttons, inputs and selects do not inherit the page font by default. The browser's own stylesheet sets it for them, and in Chrome that rule is . That is where the number comes from. The moment my declaration was discarded, the user agent default was all that was left.
So the bug reads as "my font is not applying" when it is really "my declaration never existed, and controls do not inherit".
Four lines instead of one, and all four survive. I no longer use the shorthand in interface code at all. The saving is one line and the cost is a class of failure that produces no error.
When something looks like the wrong size, measure it before you adjust it. I found this by reading in a browser automation script, and the computed value said 13.3333px while my stylesheet said 14px. That gap is the whole diagnosis, and it takes ten seconds.
Nudging pixels by eye would have produced a number that looked right on my screen and was still built on a dead declaration. The same broken line is probably still sitting in other panels I wrote before I understood this, which is the other lesson: when you find a pattern like this, grep for it rather than fixing the one you are looking at.
More