CSS: Courier font not rendered consistently on Windows and iOS

Question

The typeface my client wants to use is "Courier". Courier is not installed on every computer or smartphone. When it's not there, it falls back to "Courier New". "Courier New" is a thinner typeface than "Courier" and I want the look of the page to be as consistent as possible across different OS and browsers. So I figured: if "Courier" is not installed, why not use "Courier New Bold"? See the image below:

After creating this image I got even more confused. I added some more font names to my font-family declaration in th css, to cover how the font ("Courier New Bold", that is) could be called on different OS. This is the new declaration:

font-family: Courier, CourierNewPS-BoldMT, 'Courier New Bold', 'Courier New Fett', monospace;

Now comes the weird part: on Chrome in Windows XP, the text is stoll rendered as thin as before. And it's the same with Mobile Safari.

What I suspect is this: both Chrome (WinXP) and Mobile Safari only check the first font I declared. They see it's "Courier". They do not have "Courier" installed so they serve "Courier New". They do not take into account the other fonts I declared in the CSS.

Sorry for this lengthy post. My problem boils down to this: How can I get the text to show up as either "Courier" or "Courier New Bold" consistently across all OS and browsers?

You can find the live example here.

Update: I've read about -webkit-font-smoothing: antialiased; and added it to the CSS but this does not solve the problem. The text still looks much thinner on Windows and iOS.

Update2: This post from 2007 explains how Courier is displayed as Courier New on iOS and why it sucks. I'm not sure if newer versions of iOS still behave the same, though.

Answer 1

CSS lacks programming features, so you cannot express things like "use font A in normal weight if available, otherwise font B in bold weight" in CSS. Font family and font size are independent of each other, in CSS terms.

If you have checked that embedding is not allowed for Courier, check out the available free fonts created to resemble Courier. For a starter, check out http://en.wikipedia.org/wiki/Courier_%28typeface%29#Free_alternatives If the client can accept some of them, you could use it with @font face. (I presume you have already explained to the client that Courier is about the worst choice, competing with Comic Sans, and that the visual boldness of Courier, on computers where it is still available, may be caused by its implementation as a bitmap font, which makes it look awful in large size or in high-resolution rendering. If the client still insists, a free Courier-like font is probably the simplest and technically most reliable approach.)

Answer 2

Get some free Courier-like font and embed it as webfont to have it displayed "consistently across all OS and browsers". This is the only way to ensrue the users sees the font you/your customer had in mind when designing the site first.