Font Monospace Android 2.3

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 diff

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

Solution 2:

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 defaulttext
</div>    
<div class="cutive_block">
    Some textin cutive mono
</div>
<div class="cutive_block">
And a second line that shows it's monospace
</div>

<div class="monospace_block">
    Some textindefault monospace
</div>

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

Solution 3:

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.