How do I fix monospace spaces not being correct width in Android Chrome/Firefox?

Question

I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.

Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width. The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:

line-height:1em;
color: #ff791a; 
white-space: pre !important;
font-size: 0.7vw; 
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;

I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.

I also tried using nbsp instead of just spaces. changing letter-spacing also did not seem to have the effect I wanted.

Is there any trick to get this to work ?

you can see the site here disconnected.tech

Answer 1

Turns out some gliphs are missing in Google fonts.

A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.

I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css

It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).