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.

2 Answers 2


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".

  • 4
    Opera is not involved, is it? Commented Dec 27, 2009 at 11:29
  • Fair enough (15 chars). Commented Dec 27, 2009 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;
  • "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 Commented Mar 7, 2010 at 11:22
  • 1
    the magic trick here is adding ,serif at the end by the way. Commented Mar 7, 2010 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. Commented Mar 7, 2010 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
    Commented Mar 9, 2010 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? Commented Mar 9, 2010 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
    Commented Mar 9, 2010 at 23:30
  • @ludwig this hack may be broken in new versions of Android, based on some of the reports I am now getting. Commented Oct 13, 2010 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
    Commented Mar 15, 2014 at 16:50

You must log in to answer this question.

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