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

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

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

button { font-family: inherit }

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}

If you inspect your demo in a browser using its Developer Tools, you can see that the font family of the button element comes from the browser style sheet. They show this in different ways, and they may use different fonts there, but the principle is the same: there is a declaration for the font-family property of the element in some style sheet, hence that property cannot be inherited (unless you explicitly set the value inherit on it, of course).

This is not defined in specifications, but neither are such browser style sheet settings prohibited by them, and they are common practice.