How to choose which font is used when filling out a submit form?

Question

Site:

I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.

I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.

So far I have this:

input[type=text] {
color: #cc5723;
font-family: cutive mono;}

While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?

I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!

score 1 · Answer 1 · answered Mar 22 '13 at 17:05

I suspect it is being overridden by another CSS style. Try using:

input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}

If that works then it is being overridden somewhere in your CSS.

NOTE:!important should only be used to test. It is not a solution.

I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.

score 0 · Answer 2 · answered Mar 22 '13 at 17:02

0

Your other styles have priority over this. Use

font-family: cutive mono !important;

to test.

answered Mar 22 '13 at 17:02

Linus Caldwell

10,908
12
46
58

score 0 · Answer 3 · answered Mar 22 '13 at 17:05

0

Yep. important! works. I just wasn't sure of it, but here is the

DEMO

answered Mar 22 '13 at 17:05

asprin

9,579
12
66
119

score 0 · Answer 4 · answered Mar 22 '13 at 17:10

The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.

But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.

Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)

How to choose which font is used when filling out a submit form?

4 Answers4