Forcing HTML textarea to use a monospace font using CSS
HtmlCssHtml Problem Overview
How can I make my text area use a monospaced font?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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:
Solution 3 - Html
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;
}
Solution 4 - Html
textarea
{
font-family: monospace;
}
You may need to add an important if not working
textarea
{
font-family: monospace !important;
}