4

I'm trying to render code in monospace on my personal web site. The following CSS style works on desktop browsers (and Firefox for Android) without issues, but fails on Chrome for Android:

.code {
    font-family:Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

Adding Droid Sans Mono does not help:

.code {
    font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

Simply using font-family:monospace works correctly on Chrome for Android, but by doing so, I lose the ability to use specific fonts on desktop operating systems.

How do I get code to display with a monospaced font on Android without losing the ability to use specific fonts on other platforms? I don't want to use custom fonts as suggested by the answer to this question, I just want to use the monospaced font provided by the system.

For reference, the style file is here.

Community
  • 1
  • 1
bwDraco
  • 2,514
  • 2
  • 33
  • 38

3 Answers3

0

Chrome can't access Droid Sans Mono by specifying the name that way, monospaced is mapped directly to the Droid Sans Mono font already.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
0

It now works after updating to Chrome 30. Looks like a browser bug after all...

bwDraco
  • 2,514
  • 2
  • 33
  • 38
  • 2
    Not working for me in 2018: https://codepen.io/anon/pen/pxRzwY Here's a screencap of what it looks like on Android (Firefox and Chrome): https://i.imgur.com/pgB3HEi.jpg –  Oct 08 '18 at 19:11
  • For future reference, note that [some gliphs are missing in Google fonts](https://github.com/googlei18n/noto-fonts/issues/617). My workaround was using Adobe's [Source Code Pro](https://github.com/adobe/source-code-pro), which has all characters (including box drawing, which is what I needed). [Mononoki](https://madmalik.github.io/mononoki/) should also work. – Jacopo Oct 09 '18 at 02:17
0

The default monospace font can be modified in the web browser settings. It also depends on the operating system being used. To ensure consistent results, you need to load your own font.

What worked for me is:

@import url('https://fontlibrary.org/face/dejavu-sans-mono');

.monospace {
  font-family: 'Dejavu Sans Mono', monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning:none;
}
ArthurS
  • 350
  • 3
  • 5