4

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.

Improve this question

2 Answers 2

Reset to default
9

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

http://archivist.incutio.com/viewlist/css-discuss/103606
http://webkit.org/blog/67/strange-medium/

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
2
  • 4
    Opera is not involved, is it?
    – Ladybug Killer
    Dec 27, 2009 at 11:29
  • Fair enough (15 chars).
    – Matteo Riva
    Dec 27, 2009 at 12:12
7

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
8
  • "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, 2010 at 11:22
  • 1
    the magic trick here is adding ,serif at the end by the way.
    – Jeff Atwood
    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.
    – Ludwig Weinzierl
    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
    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?
    – Ludwig Weinzierl
    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
    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.
    – Jeff Atwood
    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
    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 .