Forcing HTML textarea to use a monospace font using CSS

Question

How can I make my text area use a monospaced font?

Answer 1

textarea
{
font-family: monospace;
}

You may need to add an important if not working

textarea
{
font-family: monospace !important;
}

Answer 2

You can also use the standard generic font-family: monospace, but be careful -- there are some severe side effects (sadly) in Chrome, Safari and anything WebKit based.

see:

• http://webkit.org/blog/67/strange-medium/
• http://archivist.incutio.com/viewlist/css-discuss/103606

Answer 3

If I'm understanding properly, it should already inherit default user-agent styles, but if you want to explicitly, just specify a font-family ( styles jacked from Stackoverflow stylesheet )

textarea {
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

Specify the more specific (monospace-specific) font families first, and if the user agent doesn't have that available it will keep trying them until the end, in which case it would default to the default user agent font family for that element, if any was specified.

Answer 4

Just use a monospace font. For example for something like:

<textarea id="mytextarea"></textarea>

the css would be:

#mytextarea {
    font-family: monospace;
}

If you want to use a specific monospace font, you can but don't forget adding the generic 'monospace' at the end in case the user does not have your preferred font installed:

#mytextarea {
    font-family: 'DejaVu Sans Mono', monospace;
}