GeezerVison

See https://twitter.com/sadhlife/status/1446060335979397120 for the sleuthing :)

Good work! As it happens, this is fixed in the upcoming Chrome 96: python/pythondotorg#1708 (comment)

Oh this kind of bugs … ☹

Thanks @tusharsadhwani and @nedbat!

I released it as python-docs-theme 2021-11 (I live in the future) and rebuilt https://docs.python.org/3/ so someone can check. Rebuild for other versions and languages will be automatically done in the next 24h.

This "fix" broke the font for me. My Chrome on my Mac is now loading Helvetica for code rather than Courier. I can confirm that removing the quotes from monospace fixes the issue for me. I recommend this change be reverted and wait for a Chrome mobile fix. Let me know if I need to create a PR.

Chrome, showing 3 different behaviours on 3 operating systems. A tale as old as time.

Perhaps the best fix is to just specify monospace. Why a fallback to sans-serif? Does any browser not have a monospace font that is used when you specify monospace?

Removing the quotes from monospace even with it being the only specified font breaks on current chrome mobile.

So... Do we need one monospace with quotes and one monospace without quotes? 🙃

Perhaps the best fix is to just specify monospace. Why a fallback to sans-serif? Does any browser not have a monospace font that is used when you specify monospace?

The problem seems to be desktop isn't picking up the "monospace" and falling back to sans-serif. If we remove sans-serif, it'll fall back to some system default, which will be some sans-serif or serif, but not monospace.

Okay, I tested on 3.9's page, and it seems just

pre {
  font-family: monospace;
}

seems to work. Can someone test it on all 3 platforms, android mac and windows, that'd be great.

Android, Chrome 94

Linux, Chrome 94

Noticed my Firefox 93.0 on win10 is weirded by "monospace" and falls back to sans-serif, though it underlines "monospace" in the style inspector as if it was used. Using font-family: "monospace", monospace, sans-serif; seems to work fine, though. Would this variant satisfy Chrome?

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

Can confirm, currently fonts on docs.python.org are NOT monospaced on Chrome. font-family: "monospace", monospace, sans-serif does work.

font-family: "monospace", monospace, sans-serif;

Can confirm, works fine. Even on mobile where just monospace, sans-serif doesn't.

There is (or was) a known problem with plain font-family: monospace; that can cause text resizing issues, see necolas/normalize.css#519 (comment). The workaround is font-family: monospace, monospace; or
font-family: monospace, anyotherfont;`

And necolas/normalize.css#519 (comment) suggests a reason, browsers looked for the fixed string font-family: monospace;

Ah, that makes sense now. So I guess monospace, "monospace"; it is then :P

MacOS Chrome 94 monospace

MacOS Chrome 94 monspace, "monospace"

Both solutions work for me.

@beauremus Thanks a bunch.