Template:Mxt/User CSS for a monospaced coding font

To consistently use a monospaced font with well-designed characters for coding so as to clearly distinguish between l, 1, and I, and between O and 0, and between -, −, –, and —, the system-default monospaced font can be changed:

If like it as-is, you can simply @import (transclude) it: see meta:User:SMcCandlish/codefont.css for quick instructions.

Otherwise, copy one of the code snippets below to your Special:MyPage/common.css or meta:Special:MyPage/global.css page, replacing "Roboto Mono" in the code with your preferred coding font. (Roboto Mono was used in this example as it is good, free coding font, for user-editable material on the wiki).

This code will:

• Apply a consistent monospace font of choice to all the normally monospaced HTML elements like <code>, <pre>, etc.
• Fallback to system-default monospace font, should the chosen font be unavailable or lack the necessary characters.
• Do the same for the output of all Example-formatting templates, such as {{mxt}} and {{xt}}.
• Apply to additional site-wide classes identified so far (e.g., .monospaced) that output as monospace.
• Make the three most frequently encountered editing fields also use this font stack: the main editing window, the edit summary line, and the search entry box.
• If any additional classes are known that should be added, please update this page or mention it on the talk page.

Horizontal style

/* Use my font, when available, for code */code,pre,samp,kbd,tt,.example-mono,.userlinks-username,.monospaced,.keyboard-key,.button,.plaincode{font-family:"Roboto Mono",monospace!important;}/* Make some of the editable stuff monospaced */#wpTextbox1,#wpSummary,#searchInput,#searchText{font-family:"Roboto Mono",monospace!important;}

Vertical style

/* Use my font, when available, for code */code,pre,samp,kbd,tt,.example-mono,.userlinks-username,.monospaced,.keyboard-key,.button.plaincode{font-family:"Roboto Mono",monospace!important;}/* Make some of the editable stuff monospaced */#wpTextbox1,#wpSummary,#searchInput,#searchText{font-family:"Roboto Mono",monospace!important;}

Cleanup efforts

If you'd like to help clean up instances of the <tt>...</tt> element – which has been discouraged since the 1990s, and should usually be replaced with <code>...</code> (this may vary by context) – you can add something like the following to your common.css to make <tt> stick out like a sore thumb:

/* Flag bad code for cleanup */tt{color:DarkRed;background:Pink;}

You can also do this with <font>, <center>, <strike>, and other deprecated elements. For CSS you can just import for this, see meta:User:SMcCandlish/lint.css.

Template documentation

This is a documentation snippet page transcluded (without the banner or this doc section) into other template documentation, and into Help:User style, for consistency. It takes no parameters.

Typical usage:

== User CSS for a monospaced coding font =={{collapse top|left=y|title=Have monospaced templates in this group – and your editing window – use your preferred monospaced font:}}{{Mxt/User CSS for a monospaced coding font}}{{collapse bottom}}

It can also be used as a stand-alone how-to page; a redirect to it, Help:User CSS for a monospaced coding font, is categorized as such. It is also transcluded as a section, at Help:User style#User CSS for a monospaced coding font.

Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Subpages of this template.