3

I'm using this well known hack to make monospace fonts use the same font size as proportional ones:

code, kbd, tt, pre, samp, textarea {
  font-size:1em;
  font-family: monospace, monospace;
}

because the default is for browsers to use a smaller size for monospace, and different browsers use different sizes, so this trick is a way to make things look more similar across browsers.

However, I just found that this doesn't work on most Android browsers! Apparently, monospace, monospace is considered an error in Chrome based mobile browsers, and they use the default proportional font instead. (Firefox is OK.)

So, does anybody know a workaround for this? I tried variants like monospace, serif, but that didn't work either.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mr Lister
  • 45,515
  • 15
  • 108
  • 150

2 Answers2

0

My testing says that you'll be ok in Chrome on Android now if you have Courier or "Courier New" (or both) in your font-family stack somewhere. You can add other fonts also and end with monospace, but you at least need one of these, apparently. Without them, you'll either get a smaller font size with just font-family: monospace, or you won't get a monospace font at all with any other font-family. Sigh.

I tested using browserstack.com screenshots for a Galaxy S7 and Nexus 6, and I've had customer complaints on later phones. Presumably this will be fixed in Chrome on Android someday.

Dave Barton
  • 1,429
  • 13
  • 12
-2

Checkout Google Monospace fonts: https://fonts.google.com/?category=Monospace. Use these directly on your website. monospace will try to use your system-defined monospace fonts.

Sumit Ridhal
  • 1,359
  • 3
  • 14
  • 30
  • Sorry, but in what way does this address my problem? I can also use "Courier New" for what it's worth, but that wasn't what the question was about. – Mr Lister Nov 15 '19 at 10:01
  • Not sure what you are to trying to achieve but this might help you: https://stackoverflow.com/a/16364321/7331574 – Sumit Ridhal Nov 15 '19 at 10:08
  • I don't know what to change about my post to make it clear I want to display monospace fonts at the same size as proportional fonts. – Mr Lister Nov 16 '19 at 13:46