Я заметил, что в случае тегов <button> font-family не наследуется автоматически; либо я должен указать его явно:
<button style="font-family: some_style;">Button</button>
или используйте свойство наследовать следующим образом:
<button style="font-family: inherit;">Button</button>
Однако семейство шрифтов автоматически наследуется в случае других тегов, например тега <a>.
Почему у нас есть эта проблема с тегами <button>?
Здесь DEMO.
Элементы формы не наследуют настройки шрифта, вы должны установить эти свойства вручную.
Если вы используете объявление шрифта для, например. тело,
body {font-family: arial, sans-serif}
использовать только
body, input, textarea, button {font-family: arial, sans-serif}
или же
input, textarea, button {font-family: inherit}
Если вы проверите свою демонстрационную версию в браузере с помощью своих инструментов разработчика, вы увидите, что семейство шрифтов элемента button происходит из таблицы стилей браузера. Они показывают это по-разному, и они могут использовать разные шрифты там, но принцип один и тот же: есть объявление для свойства font-family элемента в некоторой таблице стилей, следовательно, это свойство не может быть унаследовано (если вы явно не задайте для него значение inherit, конечно).
Это не определено в спецификациях, но ни один из них не запрещает такие параметры таблицы стилей браузера, и они являются обычной практикой.
Я знаю, что это старый вопрос, и я отвечаю поздно. И @panther, и @jukka-k-korpela правильно отвечают на вопрос. Тем не менее, им не хватает одной ключевой информации об исправлении для точного вопроса и демонстрации, предоставленной @nikunj-madhogaria. Я пытаюсь завершить ответ в соответствии с вопросом.
Поскольку вопрос касается тега button, вероятно, целесообразно добавить button в исправление CSS, предоставляемое @panther. Итак, вот правильное исправление для тега кнопки:
button { font-family: inherit }