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>

Try typing 'Orator Std '. If you are using font with name with space you have to use ' char. — Tomas Nekvinda, Jul 14 '13 at 19:49
Adding to what the person above me said, the `input` tag does not inherit styles from its parent. You must specify properties separately. — UserIsCorrupt, Jul 14 '13 at 19:53
Does the font work elsewhere on the page? Perhaps you're not embedding the font correctly (if at all). — UserIsCorrupt, Jul 14 '13 at 19:56
yeah I made a CSS document to change the font for the labels (email, telephone etc..) but the button for some reason won't change! — milcak, Jul 14 '13 at 19:57
Could it be that I cannot style a button that is already linked to a PHP document? I looked through the PHP code and there is nowhere that I can even recognize a submit button in order to style it. — milcak, Jul 14 '13 at 20:06

score 5 · Accepted Answer · edited May 23 '17 at 10:29

5

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.

edited May 23 '17 at 10:29

Community

1
1

answered Jul 14 '13 at 19:50

John WH Smith

2,743
1
21
31

1

I think Mac has a bug - it doesn't seem to honor the font. See http://stackoverflow.com/questions/28127184/font-size-of-html-form-submit-button-cannot-be-changed. But for whatever reason, if I _also_ change the font color and background color in my style, then it starts honoring the font. – Chris Torrence Dec 07 '15 at 02:36

score 1 · Answer 2 · edited May 23 '17 at 12:10

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/

how to change submit button font on contact form

2 Answers2