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.
Related
I am trying to allow the HTML font-size in a Xamarin.Forms WebView to increase/decrease in size according to the user's accessibility Large Text settings.
I want to do the following:
1: Get the preferred font size for text options (title, body, caption, etc.) from the Accessibility Large Text options for iOS and Android.
2: Get the default size for some HTML text (h1 could be 15px, h2 could be 13px, h3 could be 11px, p could be 7px, etc.) and use that with the correct text option (h1 <-> title, p <-> body) to calculate the new font-size for that HTML element.
I have found some links for iOS, Android/iOS and Xamarin.Forms on how to get some font-sizes but I can not figure out how I would get these sizes, translate the sizes of these text options to the size of some default HTML elements (H1,H2, P) and do the math to calculate the new font-size for the CSS.
Can someone help me out by figuring out some sort of plan on how I would do this? Or can someone help me by giving me a link on how I can get some sort of percentage on how big a font-size is compared to a certain default value thanks to Accessibility large text?
Thanks!
I've figured it out:
Android changes the HTML text size according to the accessibility settings automatically. No work required!
iOS allows a developer to implement several CSS classes to make the WebView change
it's text size to the accessibility settings on the iOS device.Click here to find out more
These are the classes:
-apple-system-headline
-apple-system-subheadline
-apple-system-short-headline
-apple-system-short-subheadline
-apple-system-body
-apple-system-short-body
-apple-system-tall-body
-apple-system-caption1
-apple-system-caption2
-apple-system-short-caption1
-apple-system-footnote
-apple-system-short-footnote
Go to this website on your iOS device to see what the classes look like
To use Apple's predefined fonts:p {font: -apple-system-body}
To use your own font: (You can also create your own font-family with #font-face and reference that instead of Arial!)
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
You can use the following properties:
font-family
font-weight
font-style
font-variant`
To use your own font-size:
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
.body-text-size {
font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>
Hope it helps!
Update 04-2020: I noticed one of my preview links was dead. I fixed it by finding another repo that hosted the file. I have linked that one instead and in case my links die again, I have added them to the web archive so you can find them there! :)
On my dedicated mobile website, I use the html star character ★ ★ and I apply CSS on it, especially color.
<span class="orange">★ ★ ★</span>
<span class="grey">★ ★</span>
.orange {
color: orange:
}
.grey {
color: grey;
}
Everything works well on most browsers and os, like this:
But on Samsung devices with Android 4.4 kitkat (Galaxy S4, S5...), the stars are natively styled by touchwiz (I suppose) and the color property has no effect anymore on stock browser and Chrome, but not Firefox !
And it works well on other kitkat (LG G2, Nexus 7) or Samsung with Jelly Bean.
I tried webkit specific style like -webkit-text-fill-color, with no effect.
I looked for all webkit style, but nothing seems to correspond except -webkit-text-fill-color.
I know others way to make stars like images, custom font-face or even CSS shapes, but simpler would be better.
So, have you ever seen that and found the magic style that works ?
Thanks.
I found what the problem was. It’s inside the fonts of the system, in this file exactly :
/system/fonts/NotoColorEmoji.ttf
By changing this font (Samsung emoji) with another with native Android emoji, the stars appear normally.
I found the method here : XDA - [MOD] Emoji iOS / Google on Samsung S4 Kit Kat.
So it’s not possible to tweak Samsung stars directly.
Since I have multiple colors and sizes stars, work in responsive design and need to manage retina and others HD displays, image were too onerous to implement.
I tried CSS shapes, but as I play with different sizes in responsive design (changing root font-size in em modifies the whole page), something accurate in one size, was not in another.
So I used font-face.
On Icomoon, I picked the star and made a custom font. I put the correct style and that’s it ! I can apply css like I want.
The code looks like this :
HTML :
<span class="icon-star"></span>
CSS :
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?4n7iw5');
src:url('fonts/icomoon.eot?#iefix4n7iw5') format('embedded-opentype'),
url('fonts/icomoon.woff?4n7iw5') format('woff'),
url('fonts/icomoon.ttf?4n7iw5') format('truetype'),
url('fonts/icomoon.svg?4n7iw5#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-star:before {
content: "\e600";
}
I know this was asked 3 years ago, but I recently ran into the same issue. One way is to use the css shadow hack Credit goes to Tigran for the original solution:
.orange {
color: transparent;
text-shadow: 0 0 0 orange;
}
You can do some tricky things will fonts and CSS. You might be able to colour the Samsung font. Check out my other post here:
https://stackoverflow.com/a/50478585/5078765
Let me know if it works.
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 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.
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.