Why is "font-family" not inherited in the <button> tags automatically?

Question

I noticed that in the case of <button> tags, font-family is not automatically inherited; either I have to specify it explicitly:

 <button style="font-family: some_style;">Button</button> 

or use the inherit property as follows:

 <button style="font-family: inherit;">Button</button> 

However, the font family is automatically inherited for other tags, such as the <a> tag.

Why do we have this problem with <button> tags?

Here is the demo .

Answer 1

Form elements do not inherit font settings; you must set these properties manually.

If you use a font declaration for, for example. body,

 body {font-family: arial, sans-serif} 

use only

 body, input, textarea, button {font-family: arial, sans-serif} 

or

 input, textarea, button {font-family: inherit} 

Answer 2

If you test your demo version in a browser using your developer tools, you will see that the font family of the button element comes from the browser stylesheet. They show this in different ways, and they can use different fonts there, but the principle is the same: there is an declaration for the font-family property of an element in some stylesheet, therefore, this property cannot be inherited (unless you explicitly specify its value is inherit , of course).

This is not defined in the specifications, but none of them prohibits such browser style sheet options, and they are common practice.

Answer 3

I know this is an old question, and I answer late. Both @panther and @ jukka-k-korpela answer the question correctly. However, they lack one key fix information for the exact question and demo provided by @ nikunj-madhogaria. I am trying to complete the answer according to the question.

Since the question is about the button tag, it is probably advisable to add button to the CSS fix provided by @panther. So, here is the correct fix for the button tag:

 button { font-family: inherit }