Currently the code blocks have a list of fixed width fonts specified in the style sheet, and I'd like them to just be monospace instead. I know I can override it with stylish on firefox to use Droid Sans Mono, but I think it would be better if the font choice wasn't enforced in the first place.


We can't use font-family: monospace due to massive, hairy bugs in Safari / Chrome / WebKit regarding them. Although these bugs are of the "this is how we interpret the spec" type, it's worth pointing out that no other popular browser interprets them this way.*


The moral of the story: be wary of tt, pre and font-family: monospace.

If you want it fixed, file bugs against WebKit. There is no way I'm willingly going back to that particular font-family: monospace hell.

Edit: thanks to Ludwig's answer, we now have a valid workaround! Thank you!

* I call this "Opera Syndrome".

| improve this answer | |
  • 4
    Opera is not involved, is it? – Ladybug Killer Dec 27 '09 at 11:29
  • Fair enough (15 chars). – Matteo Riva Dec 27 '09 at 12:12

There is a simple proven solution and Eric Meyer has an excellent article about it. The solution is not new (Wikipedia deployed it in December 2009) and Eric has done incredible work in verifying it.

While I can absolutely sympathize with Jeff when he says he's not willingly to go back to the font-family: monospace hell I still think this solution should also be deployed on SO and sisters.

My proposed fix is:

font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace, serif;
| improve this answer | |
  • "Really. Alone among the browsers I tested, Safari goes back to doing the resizing when you provide a generic fallback to your specific family." YEP – Jeff Atwood Mar 7 '10 at 11:22
  • 1
    the magic trick here is adding ,serif at the end by the way. – Jeff Atwood Mar 7 '10 at 11:24
  • 4
    The trick is adding ,monospace, serif. What you quoted from the article is the problem, the solution is right below: "Really! Even in Safari! And in all tested browsers, it falls back to a generic monospace font at the requested size.." Emphasis mine. – Ludwig Weinzierl Mar 7 '10 at 14:15
  • And yet, that doesn't address the original question - which was rightfully declined. He wants just font-family: monospace so he doesn't have to do any work to use his pet monospaced font. – AnonJr Mar 9 '10 at 14:27
  • @AnonJr: No, you don't need font-family: monospace to use a custom monospace font. font-family: [lots of stuff], monospace, serif is perfectly OK. And this is not about 'pet' fonts. What if you don't have Consolas on your platform and the fallback renders terribly? – Ludwig Weinzierl Mar 9 '10 at 17:21
  • 1
    From the OP (emphasis mine): "I know I can override it with stylish on firefox to use Droid Sans Mono, but I think it would be better if the font choice wasn't enforced in the first place." You are right that you don't need font-family: monospace; to use a custom font, and the OP states as much. He just doesn't want the stack to specify a font so the site will render with the browser defaults and obviate the need for him to actually use something like a custom stylesheet, stylish, GM, etc. This question is not about fall-backs for missing fonts. – AnonJr Mar 9 '10 at 23:30
  • @ludwig this hack may be broken in new versions of Android, based on some of the reports I am now getting. – Jeff Atwood Oct 13 '10 at 10:24
  • Confirmed to be broken in Chrome on the Samsung S4 mini. Fun facts: Chrome on other Androids works just fine, and so do other browsers, including the stock browser, on the very same S4 mini. But I don't mind the lack of the fixed-width rendering that much, so well... – Arjan Mar 15 '14 at 16:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .