html input font

Question

Css on the body tag:

body{
    font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
    font-size: 12px;
    line-height: 1.4;
    min-width: 1050px;
    min-height: 500px;
    color: #333333;
}

Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.

What is causing this and why?

Answer 1

Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.

To set their font, you need to use a selector that refers to them, e.g. using

body, input { 
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
  font-size: 12px;   /* if that’s what you want... */
  line-height: 1.4;  /* somewhat excessive */
  color: #333333;    /* if that’s what you want, but it reduces legibility */
  background: white; /* always set background when you set color */
}
body {
  min-width: 1050px; /* if you really want this... */
  min-height: 500px;
}

(but note that this also affects submit buttons).

Answer 2

Try to use following :

input { font-family: inherit; }

Or set any other font, and let see does this change issue.