Question

I have a span and an input element that share the same CSS definition for font. Why does Chrome use different fonts for them? How would I fix this issue?

My objective is to make them look exactly the same in IE9, Chrome and FF.

---

CSS definitions (FIXED), if they still matter.

* {
    font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
    /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
    font-size: .8em;
    margin: 0;
    padding: 0;
    color: #000;
}
.button 
{
    text-align:center;
    min-width:80px;
    display:inline-block;
    white-space:nowrap;
    background-color:#4A8CF6;
    color:#FFF;
    padding:4px;
    margin:1px;
    border:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size: .8em;
}

---

Solution

The problem was that the span elements inherited from my CSS definition for body and the input elements didn’t. I had defined the font in my CSS with body { font-family:...; } like my computed results show and I thought that using display: inline-block; would force both of them to inherit the font from body but it did not.

The solution was to switch to using * { font-family:...; } for the font definitions. The button and clickable classes simply defined sizes and colors and such.

Answer 1

You have to literally specify input elements if you want them to have the same font like so:

/* Or input[type=submit] depending on your needs */
span, input { 
    font-family: Arial, sans-serif; /* Your font here */
}

Otherwise the browser uses the default values as your question shows. You’re looking under Computed Styles which shows that Chrome has decided the values for you as you haven’t specified them.