4

I have a problem with a mobile website on Android Gingerbread and versions prior to this. Fonts monospace do not exactly behave as monospaces should: different characters have different widths.

This is how it looks on a Gingerbread default web browser (I also tested on Dolphin and Opera mini):

Gingerbread screenshot

This is how it looks on a ICS default web browser:

ICS screenshot

I used the Cultive Mono downloaded from the web.

<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>

CSS:

#my_id span{font:12px  'Cutive Mono', serif; line-height:1.6}

I also tried the default monospace font from the OS:

#my_id span{font:12px  monospace; line-height:1.6}

Does anybody know how can this issue be solved? I really need a monospace working on my mobile website.

Thanks in advance.

edit

This would be an example in jsfiddle: http://jsfiddle.net/HerrSerker/dE94s/9/

yunzen
  • 32,854
  • 11
  • 73
  • 106
user2572758
  • 41
  • 3
  • 2
    Unless you take the time to explain **precisely** what you mean by "a little differences that mess up the exactly view that I need to show" -- possibly including screenshots -- it will be very difficult for anyone to help you. – CommonsWare Jul 11 '13 at 13:17
  • 1
    Hi @CommonsWare! See my edited version =] – user2572758 Jul 11 '13 at 14:13
  • I have the same problem, it seems that even that I set monospace font it isn't monospace. You can check my testing page that I've work on: http://terminal.jcubic.pl/android.html if you take a look the space (prompt) is very narrow, it should be the same width as letters. – jcubic May 25 '14 at 18:11
  • @jcubic check out my answer, I think using the correct font family css parameter will fix the issue on your site – Patrick May 25 '14 at 18:52
  • Huh, I came here with the exact same issue, for Guitar Diagrams! Have you seen this style of guitar ascii: ``` E┌───┬───┬───┬───┬───┐ B├───┼───┼───┼───┼───┤ G├───┼───┼b7─┼───┼───┤ D├───┼─3─┼───┼───┼───┤ A├───┼───┼─1─┼───┼───┤ E└───┴───┴───┴───┴───┘ ``` (Naturally, it's all messed up here in the comments...) – null Apr 12 '19 at 09:22

3 Answers3

1

Found a fix for my case, it's seems that Andorid don't render fonts if one is missing.

this don't work:

font-family: FreeMono, Courier, monospace;

but work if I use:

font-family: FreeMono, Courier, monospace;
font-family: monospace;

In this code probably second rule overwrite the first one.

Just another weird thing with browsers, if anybody explain this or give more details, I'll give him a bounty.

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • Strange, it seems that 2.3 android does not fallback correctly to other font families when one fails. I'll suggest that you embed your font with eg. google fonts if you want a custom font or otherwise just use `monospace` and let the system decide if you want mobile compatibility. – Patrick May 25 '14 at 20:10
  • @for3st I didn't decide yet to use Andorid hack from http://css-tricks.com/snippets/css/browser-specific-hacks/ or just use `font-family: monospace;` maybe I use just monospace. – jcubic May 25 '14 at 20:13
0

This sample works fine on my 2.3.3 (SDK Lvl 10) android emulator:

http://jsfiddle.net/dE94s/3/

CSS

@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);

.cutive_block {
    font-family: 'Cutive Mono', Courier, monospace;
}

.monospace_block {
    font-family: monospace;
}

HTML

<div>
    Some default text
</div>    
<div class="cutive_block">
    Some text in cutive mono
</div>
<div class="cutive_block">
And a second line that shows it's monospace
</div>

<div class="monospace_block">
    Some text in default monospace
</div>

enter image description here

As you can see in the second and third line which uses your custom font is monospaced.

So I guess just use font-family css attribute with correct fallback font types:

font-family: 'Cutive Mono', Courier, monospace;

as suggested here http://www.w3schools.com/cssref/css_websafe_fonts.asp

Patrick
  • 33,984
  • 10
  • 106
  • 126
  • It work in jsFiddle on a Phone but not on my site, I've used: `.terminal, .cmd { font-family: FreeMono, Courier, monospace;` Here is my css http://terminal.jcubic.pl/css/jquery.terminal.css – jcubic May 25 '14 at 19:18
0

I realize it may be late, but I was having trouble with Google Fonts and found a workaround: Mononoki and Adobe's Source Code Pro have all characters, including box drawing.

The problem with Google is that some gliphs are missing.

Jacopo
  • 562
  • 6
  • 10