Font-family doesn't work on buttons

HTML-CSS
3

Form elements don’t inherit styles because each browser has its own specific way of styling the actual elements. They are already specified in a stylesheet, so it’s the same as any other element in CSS. If you specified a font-family for the whole document but decided you wanted a different one for <h1> elements (and so used, for example, h1 { font-family: serif; }), those <h1> elements would use a different font because you’ve told them to use that. Buttons and other form elements use the browser’s stylesheet, so there is a definition for <button> elements’ font-family already.

You need to specify font-family: inherit to override that

EDIT for clarity: that’s on buttons and any other form elements you want to target, like:

button {
  font-family: inherit
}

All the other elements afaik have a default font family specified in that browser stylesheet, but it’s at the same level that you’re specifying (html), and they are all set to inherit the font family. So when you write what you’ve written, you’re simply overriding that declaration in the browser stylesheet

1 Like