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+
Related
Hello Stackoverflow—to make what I'm asking about more clear, I'll elaborate.
I'm using the following symbols in a rotation transformation: ☎ and ♦ and ✔
(☎ and ♦ and ✔ respectively).
On my android device though (smart phone, LG G4), it replaces these text symbols with non-text picture emojis that do not format with my transformation or font size styles.
I want to force the browser to use the regular symbols in the font that I have supplied on my website (using #font-face with an included .ttf file). On desktops, I have no issues at all displaying my selected symbols as intended.
Your help is greatly appreciated as I'd rather not be forced to make an image substitute of my text arrangement. Thank you.
You should include a webfont with support for the characters you want to use.
To include an icon font in your CSS, use the following code :
#font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.emoji {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
You can then include your symbol like this:
<span class="icon">☎</span>
<span class="icon">✉</span>
If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for 650 symbols, which I created with the Icomoon App.
If you plan on using my Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly!
More info:
Create webfont with Unicode Supplementary Multilingual Plane
symbols
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.
Here is a nice challenge for those interested:
We knew Roboto font has a thin version, and such font can normally be specified via CSS using font-weight: lighter or weight value less than 400.
With font-weight: 200; font-family: Roboto; rule, we get Firefox on Android to pick the right version of font to display, as well as major desktop browsers (if such font exists).
Chrome on Android has a different idea: it always picks the Roboto regular font.
OK, maybe Chrome doesn't like the syntax, let's try a few alternatives:
font-weight: lighter; font-family: Roboto;
font-family: 'Roboto Thin';
font-weight: 200; font-family: 'Roboto Thin';
Nope, chrome still likes the regular version better.
How about this one?
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("Roboto-Thin");
}
font-family: Roboto;
font-weight: 200;
Sadly no, as it turned to be a bug, marked as won't fix: http://code.google.com/p/chromium/issues/detail?id=322658
Now, the team did offer an alternative:
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("sans-serif-thin");
}
font-family: Roboto;
font-weight: 200;
Which sadly doesn't work on our testing devices (OS 4.1.2 with Chrome stable/beta) neither.
Now the elephant in the room is fallback to web font, which, on Chrome beta, does work as they were fixed in http://code.google.com/p/chromium/issues/detail?id=167557
But using a web font fallback for a default system font seem rather weird. Plus it does cause an extra download and delay content displays.
So I wonder if anyone has a better workaround for this problem?
Test cases:
http://jsfiddle.net/4CDYW/13/
http://jsfiddle.net/4CDYW/14/
http://jsfiddle.net/4CDYW/15/
I've used Google Web Fonts, with font-weight 300 and used 'Roboto' as the font name and not had a problem:
From http://www.google.com/fonts
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
My mistakes: Roboto Thin does not actually exists on android 4.1 (to be honest i am not sure whether it's in 4.4, as no doc mentioned it)
so don't be misguided by http://developer.android.com/design/style/typography.html, the actual font list is in api doc: http://developer.android.com/about/versions/android-4.1.html#Fonts, where Thin is absent.
Now that it's clear only Roboto Light exists, i have tried above solutions again, and the Chromium team's suggestion are the only working solution:
#font-face {
font-family: "Roboto";
font-weight: 200;
src: local("sans-serif-light");
}
font-family: Roboto;
font-weight: 200;
this will get both firefox and chrome to use the right font without any webfont fallback.
In the Chrome browser on Android phones, #font-face is not rendering the 3 words under the logo properly at http://dev.belugalab.com/btm. However, the same font seems to be working in the footer. I'm not sure if this is related to font-face, but that is my best guess. This is a screenshot of what's happening on the Android Chrome: http://imm.io/MgE0
CSS:
#font-face {
font-family:'intro_regular';
src: url('fonts/intro-webfont.eot');
src: url('fonts/fonts/intro-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/intro-webfont.woff') format('woff'),
url('fonts/intro-webfont.ttf') format('truetype'),
url('fonts/intro-webfont.svg#intro_regular') format('svg');
font-weight: normal;
font-style: normal
}
h2 {
font-family:'intro_regular';
font-size:31px;
font-weight:400;
color:#fff;
background:#000;
display:inline-block;
height:30px;
margin:3px 0 4px 39px;
line-height:30px;
padding:0 4px
}
It renders correctly on Chrome for iOS. I don't have an Android device to see it, but try making your H2 line-height and height the same or more than the font-size. They are currently 1 pixel shorter than your font-size.
I don't have an Android phone, but from looking at the screen shot it looks like the h2 doesn't even have the same font. When opening the page in Chrome (Mac) and unchecking the "font-family" (in Developer Tools) it looks a lot closer to the screenshot. When I remove the line-height tag and increase the size of the text a bit it looks just like the Android screenshot.
I would try removing the height and line-height and adjust the padding to get closer to what you want. That will at the very least prevent the text from getting cut off.
I suspect something wrong with the 'intro_regular' font. Perhaps the Android Chrome is using a different font format than the desktop? SVG perhaps?
My first suspicion was another CSS rule overriding another on Android but not the desktop. But I couldn't find any other rules that would do that.
Have you tried clearing the cache on the Android Chrome?
Having a very strange issue on Android 4.x.
The font I'm using will not display the European currency code.
On any iOS and Android 2.x this works fine:
#font-face {
font-family: 'Trade Gothic Bold';
src: url('../../font/tradegothic-bold-webfont.eot');
src: url('../../font/tradegothic-bold-webfont.woff') format('woff'),
url('../../font/tradegothic-bold-webfont.ttf') format('truetype'),
url('../../font/tradegothic-bold-webfont.svg#webfontmlgY0et7') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'Trade Gothic Bold', Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
}
Oddly, the Trade Gothic Font appears fine everywhere else on 4.x, even other currency code's are rendered fine (dollars, pounds, etc).
Anyone ever run into this? I'm forcing a fix by detecting the user agent and switching the font to arial, and it renders fine. PM's don't quite believe me when I tell them it's a font problem.
Had a similar issue where the Trade Gothic Font licensed by MyFonts wasn't being picked up at all by Android 4.0.x phones on the native browser (as opposed to Chrome for Android).
Once confirmed that the css was right and the truetype font file was downloaded by the browser, I tried replacing the .ttf file for the same font but from a different provider and it turn out to render the font correctly.
So bear in mind that, at least for this particular font, some binary files might have issues on Android browsers.