Question

Don’t the html form input elements such as input text field or select box automatically inherit the font-family property from the body?
For example:

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

It will not use the above font in the below form input field:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Please have a look at http://jsfiddle.net/3fkNJ/

Is it common that we have to re-define the font family for the input fields, or am i doing something wrong?

Answer 1

Yes, you need to place the font in the input tag.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

You can also use inherit to set the font on form fields.

input, textarea, select { font-family:inherit; }

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT – explanation added

Most browsers render text inside form elements as that of the user’s operating system. This is to keep, as I understand it, a common look and feel for the user. However, it can all be overwritten by the code above.