Which font to render ASCII art on all browsers?

Question

The code below (generated with patorjk.com Text to ASCII Art Generator) gives the expected result (a 'TEST' ASCII art text) on :

• Windows : Firefox, Chrome, IE

• Mac : Firefox

But the result is bad (see note below) on :

• Mac : Chrome, Safari.

What should be used in order that a <pre> with monospace font is properly displayed crossbrowser ?

---

pre{
 font-family: monospace;
}

<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>

---

Note : Here is the bad result :

Answer 1

From the screenshot, it is apparent that the character “═” U+2550 is from a different font than the other characters: it is different in shape and does not join with them as it should, and it is considerably wider. This breaks the monospace nature of the presentation and the intended shape.

The reason is that the default monospace font (i.e. the font that the generic name monospace is mapped to) of some browsers does not contain a glyph for “═”, so the browser has to pick it up from some other font (using its internal list of fallback fonts).

The only safe way (or as safe as you can get) is to find a free monospace font that contains the characters you need and use it as a downloadable font, via @font-face. I suppose DejaVu Sans Mono or FreeMono might qualify.

Background info and explanations: Guide to using special characters in HTML.

Why is it so complicated? Well, monospace fonts are an old invention, but many of them have a rather limited character repertoire. Note that “ASCII art” often isn’t (just) ASCII these days; e.g., “═” is not an ASCII character.