Search code examples
csswebfonts

font-weight 500 and 600 not working on input element

Values 500 and 600 of font-weight don't work on input element. 500 scales down rendering 400 version of the font and 600 up to 700. It behaves this way both in Firefox and Chrome. Why does it happen? Is there a way to make inputs render 500 as well?

Here's a pen illustrating the problem: http://codepen.io/anon/pen/NPYPVg

Solution

  • You have to declare the font family for your inputs. It wont work otherwise as the input doesnt recognize the font Open Sans or roboto

    font-family: "Open Sans";

OR

font-family:"Roboto"