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

Magisterial

I'm also seeing this issue on both Chrome and Firefox on mobile (can't test Safari right now). Here's an example: codepen.io/anon/pen/pxRzwY Here's a screencap of what it looks like on Android (Firefox and Chrome): i.imgur.com/pgB3HEi.jpg StackOverflow itself seemed to have this problem at some point but they've since solved it: meta.stackexchange.com/questions/230878/… I've tried using their same font-family list to no avail. – Alyssa

There seem to be lots of references to various Android monospace bugs around the net, but I can't seem to solve it using their solutions. – Alyssa

@Joe better edit the question with the comment to include all the details inside the question – Washedout

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).

Outpoint

I just tried "Source Code Pro" (using Google Web Fonts) and it still doesn't seem to be working on Android: codepen.io/anon/pen/yRgXzO :/ – Alyssa

Brilliant! I'm going to self-host the font files just in case that github.io page changes. Thanks! Will award bounty when StackOverflow lets me (need to wait 13 more hours) – Alyssa

Thanks @Jacopo. Using the adobe font directly seems to fix the problem. I wonder why they have this defect in the standard fonts in android. – Magisterial

favorite answer on stackoverflow, had so many issues with monospace on mobile. @Outpoint and the other answers here are a much needed fix :D – Radioscopy

For me Mononoki did not work, but converting spaces to nbsp's did. – Quipu

ridiculous I have to even say this in 2022, but even on an up to date Pixel phone in an element with white-space: pre;, in order to properly render ascii art and preserve formatting in mobile Chrome I had to use the copy of Source Code Pro direct from Adobe and host it on my server. Google Fonts version of that font still doesn't have all the characters and the default fallback is not perfectly monospace. – Yecies