CODEWITHSUNDEEP
androidcssfont-faceandroid-2.3-gingerbreadandroid-2.2-froyo
user2572758
user2572758

Reputation: 41

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 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/

Upvotes: 4

Views: 1814

Answers (3)

Jacopo
Jacopo

Reputation: 572

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.

Upvotes: 0

jcubic
jcubic

Reputation: 66490

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.

Upvotes: 1

Patrick
Patrick

Reputation: 35234

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

Upvotes: 0

Related Questions