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

Question

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

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

or use inherit property like this:

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

However, the font-family is automatically inherited in case of other tags, the <a> tag for example.

Why do we have this issue with the <button> tags?

Here's a DEMO.

Answer 1

Form elements don't inherit font settings, you have to set these properties manually.

If you use font declaration for eg. body,

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

use just

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

or

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