I have input and label fields:
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
It does not inherit by default but you can set it to inherit with css
input, select, textarea, button{font-family:inherit;}
demo: http://jsfiddle.net/gaby/pEedc/1/
Three years later, I'm finding it strange <input>
elements of types reset
, submit
, and button
don't inherit font-family
in Chrome or Safari. I discovered they would not receive padding either.
But when I mess with certain properties, like background
, border
, or this strange appearance
property, then font-family
and padding
have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
If you want a native looking button, with inherited font-family
, use the <button>
element instead of <input>
.
See Codepen.