Forcing HTML textarea to use a monospace font using CSS

HtmlCss

Html 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;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLawrence DolView Question on Stackoverflow
Solution 1 - Htmlmeder omuralievView Answer on Stackoverflow
Solution 2 - HtmlJeff AtwoodView Answer on Stackoverflow
Solution 3 - HtmlslebetmanView Answer on Stackoverflow
Solution 4 - HtmlGazzerView Answer on Stackoverflow