Improve monospaced font on Chrome Android

[simurai]

This improves the monospaced font on Chrome Android.

Problem

It seems that Chrome on Android skips the first 4 fonts from Primer's mono font stack and uses Courier. Which is very thin and probably not meant for smaller text sizes. Interestingly Firefox skips Courier and uses the fallback monospace font.

$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;

Chrome	Firefox

Fix

By switching the order, Chrome now also uses the browser's fallback monospace font before using Courier. This should translate to:

• Chrome Android: monospace -> Monaco
• Firefox Android: monospace -> Droid Sans Mono

Alternatives

We could add Monaco and Droid Sans Mono to the font stack. Which would have the same result. But maybe it's ok to leave it up to the browser to pick the "best" monospaced font. In case we don't like it whenever it gets changed, we can override it again.

/cc @primer/ds-core

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[shawnbot]

I'm a fan of this. I do wonder which OS/device combos were even using Courier, but I agree that falling back to the OS default is probably better in those cases.

[shawnbot]

@broccolini do you want to weigh in on this before we include it in the next patch release?

[simurai]

I slightly changed this PR:

- $mono-font: ... Courier, monospace;
+ $mono-font: ... monospace, Courier;

So now, in the unlikely case (and I would consider it a browser bug) that monospace gets skipped, there is still Courier as a last fallback.

@broccolini would that be ok? It now should be even less risky.

[simurai]

After chatting with Shawn, I removed Courier again as a last fallback. It really shouldn't be needed and every browser should support monospace. For example Chrome on macOS uses Courier as the default for monospace.