Buttons and inputs not inheriting the body's font-family

Question

Can someone help me understand why the user agent stylesheet (in Chrome at least) is taking precedence over the body for font-family on my site here? I know it's easily fixed, but I'm trying to be elegant here.

Answer 1

Clause 6.1.1 Specified values of the CSS 2.1 specification defines as the first step: “If the cascade results in a value, use it.” Only after this will inheritance be considered. A browser style sheet (user agent style sheet) is conceptually part of the CSS cascade. So if it sets a value for font-family for an element, such as input or button, that value will be used, unless another style sheet sets it for that element.

Thus, if you want to use your font for input and button elements, too, you need to set e.g.

body, input, button {font-family: 'Indie Flower', cursive;}