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?
Related
i have problem with different appearance between android and desktop.
not about responsive, but a simple css appearance
i have this
<div class="related">
<h3>Related Posts</h3>
</div>
with css:
.related {
height: 30px;
}
.related h3 {
font-size: 18px;
line-height: 30px;
}
on desktop, h3 lined perfectly in the middle of .related bar, while on android (galaxy grand prime) h3 lined a little bit above, closer to top, around 40% closer to top than 60% to bottom. so 20% difference, which is very visible.
am i missing something? is this Android bug? thanks
The #media rule is used to define different style rules for different media types/devices. Media types look at the capability of the device, and can be used to check many things, such as: width and apply different css to that device.
Example : #media screen and (max-width: 300px) {}
Different devices often behave totally differently and different browsers differently again.
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'm using an #font-face declaration to call a font on a website and it displays in IE, FF, Chrome, even Mobile Safari. However, the font is not displaying in Chrome 18.0.1025308 for Android (4.1.2).
The syntax I'm using is fontspring's bulletproof syntax, and I'm having a real problem determining what is preventing the font from displaying properly.
CSS:
#font-face {
font-family: 'jump_startregular';
src: url('wp-content/uploads/fonts/jstart-webfont.eot');
src: url('wp-content/uploads/fonts/jstart-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/uploads/fonts/jstart-webfont.woff') format('woff'),
url('wp-content/uploads/fonts/jstart-webfont.ttf') format('truetype'),
url('wp-content/uploads/fonts/jstart-webfont.svg#jump_startregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any thoughts?
The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:
font-family: fghjkjh, 'jump_startregular', sans-serif;
...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)
In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the #font-face block instead, which probably causes problems with other older browsers.
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.