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.
Related
i'm live in S.korea and my english is not good
I hope you understand my poor English skills.
my problem is this
Unlike Android 6.0 or later versions, versions differ from version to version.
this is CSS
.box {
width:100px;
}
p {
display: block;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient:vertical;
word-wrap: break-word;
}
.font1 {
font-family: helvetica Neue, sans-serif;
}
.font2 {
font-family: helvetica, sans-serif;
}
this is my code
<div id="test">
<div class="box">
<p class="font1">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
<div class="box">
<p class="font2">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
</div>
picture
I know that android is no have helvetica font and android 6.0 verion default font 'Roboto' too.
Q1. font-family: helvetica Neue,sans-serif
- Why is there a 'sans', not a font, like 'sans-serif'?
(picture top)
Q2. is that font Droid??
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
Sorry for Not English well. but i need ur help, beacuse i think S.korean people don't know this problem
Q1. font-family: helvetica Neue,sans-serif - Why is there a 'sans', not a font, like 'sans-serif'? (picture top)
Sans-Serif and Serif are two different categories of font, considering Times New Roman and Arial: Times New Roman is a commonly used serif font, where Arial is a commonly used sans-serif font. (Do I understand your question correctly?)
Q2. is that font Droid??
Droid fonts are totally different fonts by Ascender Corporation. They do have Droid Sans or Droid Serif, but they are a different set of fonts designed for small screens.
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
I think you spell it wrong.. try "family" but not "familiy". Otherwise you may be interested in this example:
jsfiddle.net/dsymbwwg
One more hint for communicating in English, try use Google Translate, you can type your question entirely in Korean and get the English result, paste that to us so that we could better understand your situation. :)
Hope that helps.
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.
I have the following content on my site:
<div style="font-size: 11px; line-height: 17px; text-align: left;">
<p>lorem ipsum etc etc</p>
</div>
As you see, the font size is set at 11px. Of course it displays as 11px in all browsers, because there's no reason for it not to. Looking at "inspect element" there are no conflicting styles or anything. The inline font-size: 11px; is all there is.
However, for some reason I can't fathom, the text is huge in Firefox on Android. And I mean huge, to the extent that it ruins the layout of the page.
At first I thought it may be a problematic setting in my Firefox, but no. I tried on several devices and it's the same thing. There is an option in the browser to adjust the text size, as well as a 'font inflation' option, but even setting it to the smallest size, this paragraph remains gigantic.
Most of the site looks OK, it's this paragraph and a few others that are blown out of proportion. They all have set font sizes.
Any ideas?
I could solve it better with a link to your css file where these font styles are being handled but without seeing that I could suggest you try em units and see if you have any more luck.
An explantion + example of em being used in CSS -
EM units for font size
Other than that it could be a problem with font-family not being supported in the same way across all browsers or possibly some browser specific styles using moz (for firefox) and webkit (for chrome) being applied.
I know there are already some fixes but none of them seem to work.
I want to use "Helvetica Neue" with font-weight:300 on my site. It all looks good on Desktop but as soon as I switch to android, there seems to be no light fonts.
Here you can see my test at jsbin.com . Feel free to edit around, on my Galaxy S3 and Nexus 4 the fonts all have the same weight.
As you can see I also tried to include roboto and set it to light but that didn't work either (used some more methodes but didn't want to make an extra H1 for every single one).
My testcase:
<h1 class="neue">Does not work</h1>
<h1 class="neueLight">Does not work</h1>
<h1 class="neueLighter">Does not work</h1>
with this CSS:
h1.neue {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLight {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLighter {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: lighter;
}
This worked (only with android 4.2+):
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Helvetica Neue is not available on most devices, including Android (which has a small set of installed fonts).
Regarding Roboto, you seem to be asking for weight 100, but your link element only takes weight 300 into use. And you are referring to the font only in WOFF version, which is not supported by many Android versions.
use font-weight:100
also make sure your font supports different font weight
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Note: this only works with android 4.2+
I've got the following font stack on my website:
font-family: Skolar, Tisa, "Chaparral Pro", Merriweather, Georgia, serif;
But for some reason Android (version 2.3.5, native browser) keeps giving me a sans-serif font. However, it works if I remove every font except Georgia and serif.
This is getting really frustrating. Any ideas?
As answered earlier, in question: Assigned the Droid Serif font to an HTML element but my Android phone still displaying Droid Sans?
You should start your font-face line from "serif":
font-face: "serif";