font-family:monospace not working in Chrome?

[Stan Brown]

URL: https://oakroadsystems.com/genl/relation.htm#Cousin
CSS: https://oakroadsystems.com/ors.css
(Both validate without errors or warnings, using the W3C's VNU,
except a warning about windows-1252.)

The pre element is styled with font-family:monospace, so that the
chart's vertical lines will align to the edges of the horizontal
line. In Firefox I get a monospace font and they do, but in Chrome I
get a proportional font and they don't.

I inspected the <pre> element, and it shows font-family:monospace
coming from my CSS, but it's using a proportional font anyway,
specifically Lucida Sans Unicode. (Just to make sure Lucida Sans
Unicode wasn't incorrectly identifying itself as monospace, I opened
Properties of a command window, and on the Font tab Lucida Sans
Unicode was not available, just Lucida Console and Consolas.)

I noticed that I _do_ get monospace in Print Preview in Chrome. The
difference is that I specify a bunch of font families in a @media
print rule. As an experiment, I tried specifying those font families
in the regular <pre> rule as well, and when I do that I get a
monospace font. (I didn't upload that CSS file.)

1. Isn't the browser supposed to pick an available monospace font
when a CSS rule specifies monospace?

2. Am I doing something wrong that is causing Chrome to pick a
proportional font?

3. Although I "fixed" the problem by specifying font families, that
doesn't help people who don't have any of those fonts. Is there a
universal solution, or at least a nearly universal solution?

Thanks!

--
Stan Brown, Tehachapi, California, USA
https://BrownMath.com/
https://OakRoadSystems.com/

[John-Paul Stewart]

On 2021-07-14 1:13 p.m., Stan Brown wrote:
> URL: https://oakroadsystems.com/genl/relation.htm#Cousin
> CSS: https://oakroadsystems.com/ors.css
> (Both validate without errors or warnings, using the W3C's VNU,
> except a warning about windows-1252.)
>
> The pre element is styled with font-family:monospace, so that the
> chart's vertical lines will align to the edges of the horizontal
> line. In Firefox I get a monospace font and they do, but in Chrome I
> get a proportional font and they don't.

Is it possibly a misconfiguration of your browser? Chrome on my systems
(Chrome 91.0.4472.124 on Windows & Chromium 90.0.4430.21 on Debian) are
definitely using monospaced fonts. In Chrome, go to Settings ->
Appearance -> Customize Fonts. What is set for "Fixed-width font" and
does the preview text below the drop-down selector appear correctly?
Perhaps your browser has been set to use an inappropriate font rather
than there being anything wrong with your stylesheet.

[Stan Brown]

Brilliant! I never thought of checking that, but it was exactly as
you said. Thank you very much!