Develop Reference

How do I fix monospace spaces not being correct width in Android Chrome/Firefox?

I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.
Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width.
The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.
I also tried using nbsp instead of just spaces.
changing letter-spacing also did not seem to have the effect I wanted.
Is there any trick to get this to work ?
you can see the site here disconnected.tech

Turns out some gliphs are missing in Google fonts.
A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.
I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).

What Chinese font should i use in my CSS for Android 4.4?

I am using below CSS in my code. But I'm not sure if Android 4.4 have "Microsoft Yahei" font. Which exact chinese font should i specify in my CSS?
body {
font-family: Roboto,Arial,Helvetica,"Microsoft yahei","微软雅黑","微軟正黑體Microsoft JhengHei","微軟正黑體 Microsoft JhengHei","Microsoft JhengHei","微軟正黑體",sans-serif;
}

I believe its Noto Sans but for future reference font are stored under /system/fonts in your android directory if you need to look it up.

comic sans font not showing on mobile

I recently built a comics website at www.pipanni.com that uses the "Comic Sans" font. Everything is ok so far, except that the font is not showing on my Samsung Galaxy mobile phone. It shows something that looks like Arial.
I've already tried every clear history / cache, etc.
Here's my styles font:
body
{
font-family: "comic sans ms", "comic sans", "Comic Sans", arial, helvetica, tahoma, verdana;
font-size: 18px;
color: #000000;
}
The home page's title is working ok on my laptop (and every other computer I've tested the website on), but not on my smartphone.
I don't have an iphone, but I think it is working ok on those.
What can I try next?
P.S: This is a comics website, it's supposed to use "Comic Sans"! :)

I just found the simple solution for this, you just need to override the font file using font face like so:
#font-face {
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
and HTML code
<h1 style="font-family: 'Comic Sans MS';">Comic sans</h1>
What happen is browser will override the default font file by using your file. In any devices, the browser will download comici.ttf and render the same font.
p/s: font file you can download from here https://www.wfonts.com/font/comic-sans-ms

To display a font, the device must have this font installed. If not, it uses the fallback you gave to it ( here Arial).
If you want to include a specific font, you can user websites like google font or you could use #Font-face ( look here : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp )
But be aware that you need the rights to use and install that font.

checkout out font-squirrel. They have an app that will allow you to change a font like comic sans into an embedded font. Very handy for ensuring your look is consistent across all devices.
https://www.fontsquirrel.com/tools/webfont-generator
Go to expert settings and choose base64encode.
It will create a css file that has the embedded font which you include on your css.

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):
This is how it looks on a ICS default web browser:
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/

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.

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

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.

Assigned the Droid Serif font to an HTML element but my Android phone still displaying Droid Sans?

I have this in my CSS:
.like-counter span, .entry-content h2 {
color: #444;
font-family: Bitstream Charter, "Droid Serif", Gerogia, serif;
font-weight: bold;
}
In my computer, I see a serif font. If I remove the first one, then I see the Droid Serif font. I thought this font was a default font in Android devices.
But when I open the site on my Android phone. I'm still seeing Droid Sans.
What could be causing this?
EDIT:
I discovered that the problem only happens when I display the page in Android's default browser. In Firefox, I can see the Droid Serif font (strange).

Instead of guessing the default fonts, you can just use the generic serif font:
font-family: serif;
serif will be the browser's default serif font.

On older Android systems (until a version that I'm not aware of) the browser instead of checking the full list of possible fonts, it checks the very first entry of the font family, and if it is known to the browser, what to substitute it with, then it will use that, otherwise it will throw away the whole list.
This is notable, if you just use Times for example, it will use Droid Serif, but if you add some fancy font before it, it will use Droid Sans, regardles of the rest.
Obviously it will work, if you put the “serif” in first place, but then all the browser use the default serif font, instead of whatever you want. Because of the simplicity of the font selection on older Android, you can add a "serif" family to the first place, which will be interpreted as Droid Serif on the old Android, but other browsers will look (and hopefully fail) for a font named “serif”.
Also—interestingly—none of the Droid fonts are known to those Android browser.