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

itemprop="text">

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

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 href="https://disconnected.tech" rel="nofollow
noreferrer">disconnected.tech

class="post-text" itemprop="text">

class="normal">Answer

Turns out
rel="noreferrer">some gliphs are missing in Google
fonts.

A workaround is Adobe's href="https://github.com/adobe/source-code-pro" rel="noreferrer">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: href="https://adobe-fonts.github.io/source-code-pro/source-code-pro.css"
rel="noreferrer">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).