Font monospace Android 2.3

Question

I have a problem with a mobile site on Android Gingerbread and versions before. Monospace fonts do not behave exactly like monospiers: different characters have different widths.

Here's what it looks like on the default Gingerbread web browser (I also tested on Dolphin and Opera mini):

Here's what it looks like on the default ICS web browser:

I used Cultive Mono, downloaded from the Internet.

<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 anyone know how to solve this problem? I really need a monospace that works on my mobile site.

Thanks in advance.

change

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

Answer 1

The fix found for my case, it seems that Andorid does not display fonts if they are not.

this does not work:

 font-family: FreeMono, Courier, monospace; 

but work if i use:

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

In this code, the second rule probably overwrites the first.

Another weird thing with browsers, if someone explains this or gives more details, I will give him generosity.

Answer 2

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

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 monospace </div> <div class="monospace_block"> Some text in default monospace </div> 

As you can see in the second and third lines that use your own font, monospaced.

So, I just use the font-family css attribute with the correct types of fallback fonts:

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

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