how to change submit button font on contact form

Question

The 7th line from the end I tried to add in some CSS but it won't change the font on the button. Is there a way to do it in CSS or PHP? (Or maybe a way that actually works in HTML)

Thanks in advance! I'm really new at this.

here's my code:

<form name="htmlform" method="post" action="something_sendform.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr style="font-family:Orator Std">
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

Solution 1

Use the font-family CSS property :

input[type=submit]{
    font-family: 'Orator Std';
}

To be all-browsers compatible, add class="mysubmitbutton" to your button, and use input.mysubmitbutton instead of input[type=submit].

Edit : If you want to do this directly in the HTML code, do it on the input tag :

<input type="submit" value="Submit" style="font-family:'Orator Std';" />

I am not sure that Orator Std is a native CSS font though... For custom fonts usage in HTML/CSS, see this question.

Solution 2

You're applying the styles on the wrong element. Try this:

<input type="submit" value="Submit" style="font-family: sans-serif; font-size: 25px;">

Note that that Orator Std is a custom font and if you want to use it, you'll have to download the font file and load it in your CSS using @font-face.

Also, using inline styles is generally regarded as a bad practice and it's best to apply the styles on input[type=submit] in your CSS file or inside the <style> tags. This question answers that in greater detail.

Demo: http://jsfiddle.net/Dq3Mg/

Comments

[Chris Torrence]

I think Mac has a bug - it doesn't seem to honor the font. See stackoverflow.com/questions/28127184/…. But for whatever reason, if I also change the font color and background color in my style, then it starts honoring the font.