How to add font to a select?

Question

I have the following link:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">

And I’d like to add her to a select.

I’ve tried putting in CSS select { font-family: Arial} and it doesn’t work.

Would anyone know how to place this source? Below the code I’m using to create the select

<tr>
    <td colspan="2>
        <select name="lead_source" style="color:gray; width:100%; height:50px;" required="required">
            <option style="display:none;" value="" disabled selected>Como chegou até nós?</option>
            <option value="Anuncio" style="color:black">Anuncio</option>
        </select>
    </td>
</tr>

Answer 1

The font you want to add is Open Sans, the code you are setting is to add the Arial font.

That is, you should use a css like this:

select {
    font-family: 'Open Sans', sans-serif;
}

Edited:

I believe you are viewing the placeholder font, which by default is not affected by the above code. Try this:

::-webkit-input-placeholder {
    font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder {
    font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder {
    font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder {
    font-family: 'Open Sans', sans-serif;
}

Edited 2

Try to do the online setting then, as in the example below:

<tr>
    <td colspan="2">
        <select name="lead_source" style="color:gray; width:100%; height:50px;" required="required">
            <option style="font-family:'Open Sans', sans-serif; display:none;" value="" disabled selected>Como chegou até nós?</option>
            <option style="font-family:'Open Sans', sans-serif; color:black" value="Anuncio">Anuncio</option>
        </select>
    </td>
</tr>

In case it still doesn’t work, one last attempt, but not recommended, would be to use a !important in select’s own css. Or, there is some other font property overwriting that of select.

Answer 2

CSS

select{
   font-family: "Open Sans";
}

Now using Inheritance from a Parent Element.

HTML

<div class="form-group">
   <select>
      <option> Teste de Fonte em Select </option>
   </select>
</div>

CSS

div.form-group{
   font-family: "Open Sans";
   font-size: 20px;
}

select{
   font-family: inherit;
   font-size: inherit;
}

The inherit inherits from the Parent element - in this case the div.form-group - the properties. But as said, not all browsers understand this.