Ie Uses Courier Font When "Font-Family: Monospace" Is Used

Internet Explorer: drop down does not display option font family

Some form elements can't be styled in IE - the only option I see is to create your own controls, via DHTML / JS

Something like this: http://v2.easy-designs.net/articles/replaceSelect/

CSS: Courier font not rendered consistently on Windows and iOS

CSS lacks programming features, so you cannot express things like "use font A in normal weight if available, otherwise font B in bold weight" in CSS. Font family and font size are independent of each other, in CSS terms.

If you have checked that embedding is not allowed for Courier, check out the available free fonts created to resemble Courier. For a starter, check out
http://en.wikipedia.org/wiki/Courier_%28typeface%29#Free_alternatives
If the client can accept some of them, you could use it with @font face. (I presume you have already explained to the client that Courier is about the worst choice, competing with Comic Sans, and that the visual boldness of Courier, on computers where it is still available, may be caused by its implementation as a bitmap font, which makes it look awful in large size or in high-resolution rendering. If the client still insists, a free Courier-like font is probably the simplest and technically most reliable approach.)

How to use a particular font from a given (built in) family with Tailwind?

You can override the font-mono font families in the Tailwind configuration file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'mono': ['"Courier New"', 'monospace'],
      },
    },
  },
};

You should keep the monospace font as a fallback for when Courier New is not available.

Also, you can add new font families within the theme.extend.fontFamily object (theme.extend.fontFamily.foobar translates to the font-foobar CSS class), so it might be more sensible to create a new family entirely for your Courier New-specific use case instead of overriding a default.

why does font-family: monospace changes the layout of my dl

The reason is the different line-height of the fonts used. Your system's monospace font is slightly smaller than the other font used. This leads to different heights of the dd and dt elements. Now, in the first case (dd is monospace), the second dt element is below the first dd because there is like literally one pixel left of the first dt's height, so it gets placed there due to the floating.

If both are set to monospace, it looks good again because all elements have the same line-height again.

 dl {   width: 100%;   overflow: hidden;   background:#ff0;   padding: 0;   margin: 0; } dt {   float: left;   text-align: right;   width: 20%;   background: #cc0;   padding: 0;   margin: 0;
   font-weight: bold;   /* Question 2 */   font-family: monospace;   margin-right: 10%; } dd {   float: left;   text-align: left;   width: 70%;   background: #dd0;   padding: 0;   margin: 0;   /* Question 1 */   font-family: monospace; }

<dl>  <dt>cat</dt><dd>small, domesticated  feline</dd>  <dt>bear</dt><dd>large omnivore (top land predator)</dd>  <dt>giraffe</dt><dd>the most useless quadruped</dd></dl>

<table border="0" style="font-family:Courier, monospace;">
<tr>
    <td>GCAUCCGGGUUGAGUGC</td>
</tr>
<tr>        
    <td>...(((())))).....</td>
</tr>
</table>

.mybox {
    font-family:monospace;
    white-space:pre;
    max-width:82ch;
    width:82ch;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .mybox {
        max-width:95ch;
        width:95ch;
    }
}