I've got really weird Font-Rendering Problems with my Galaxy Nexus Phone, Android Version 4.3.
It changes the font on some lines, but I have no idea why. There is no tag between them, it's all written in a plain <p> tag or heading-tag.
What could be the source of the problem?
I've tried other fonts, but it happens to all of them. Georgia, Arial, Helvetica...
Picture:
The umlauts were actually causing this weird behaviour.
Related
I've got a little tool to work out your favorite Pokémon, located here. For a little while now, I've been getting intermittent report from users that the images aren't working - they're just seeing empty gray circles. Long story short, they all seem to be using Chrome on Android, and I've confirmed with some friends with Android phones that it's not working for them either, using Chrome 78 on Android 8 or 9.
However, it's working fine for another friend using the same Chrome on Android 10, and on my husband's phone (Android 6), where Chrome hadn't been updated in a bit and was still on version 76, it was also working until he just now updated it to 78 (at which point his phone immediately began to have the same problem). Chrome 78 on my iPhone, or on my laptop, works fine.
If I manually open the direct link to one of the images on his phone post-update, that works fine, so presumably it's not having trouble loading the images (which would have been weird anyway, as they're hosted on the same domain).
Looking back through my e-mail at the reports I've gotten, the first one appears to be from October 12th, with Chrome 77 being released in September, so it seems plausible that the issue first appeared there.
However, I'm kind of at a loss as to how to approach this. What might have changed in Chrome 77, on Android <10 only, that could be causing this, and what could be done to fix it? I don't think I'm doing anything terribly weird on that page; this is the CSS that's applied to the relevant elements:
.item-list li {
margin:0;
display:inline-block;
height:106px;
width:106px;
border:3px solid transparent;
text-align:center;
position:relative;
vertical-align:top;
overflow:hidden;
border-radius:100%;
color:#F7F7F7;
}
.item-list li span {
display:block;
width:100px;
height:100px;
padding:3px;
background:#F7F7F7;
border-radius:100%;
}
.item-list li img {
position:absolute;
top:-7px;
left:-11px;
z-index:100;
}
Turns out this was about Chrome's new native lazy-loading of images, which for some reason was preventing these images from loading even though they were visible and above the fold. As far as I'm concerned this just plain looks like a bug in Android Chrome. Manually enabling or disabling lazy loading under chrome://flags would trigger or resolve the issue, even on the exact same device.
By manually adding loading="eager" on the image tags, I could force Chrome to load the images anyway even when the feature is enabled, solving the issue. I hope to be able to create a minimal test case to be able to file a bug about this and get it actually fixed at the source.
I'm currently building a Phonegap App, and I'm trying to include fonts with css as follows:
#font-face {
font-family: "ostrich";
src: url("fonts/Ostrich.ttf") format("truetype");
}
This works on my emulator running on a Nexus S running Android 4.4.2, however it does not work on my physical Samsung S3, running on Android 4.3.
I have tried to fix it by copying my fonts folder into my assets directory and accessing it as "file:///android_asset/fonts/Ostrich.ttf", and once again, this seems to work in my emulator, but not on my device.
I might be doing something wrong, but if it's a bug, what would be a walk-around for this? I would really appreciate your help.
Thank you very much.
Edit 1:
I've browsed plenty of questions in StackOverflow already that try to address this problem. I have noticed that the one they link the most is this one how use custom fonts in phonegap - however they mention it does not seem to work for Android 4+, however it does work in my Emulator, it just doesn't work on my physical device...
After wrestling with my phone for hours I found this answer which basically shows that there's a bug for Android 4.3 which just makes this a pain in the ass. Surprisingly the walkaround is easy, you just have to wrap your fonts with the #media only screen {} and include svg fonts instead. That should do :)
Thank you very much, and good luck. Hope that if you have this problem you find this answer faster than I did.
I'm developing an app in phonegap and I'm now searching for days to solve this problem. I checked every other topic related to custom font faces but no one has already faced my problem.
The matters is that I want to show farsi fonts in my app. it works well in PC , android browser and phonegap apps in android 2.x and 4.4 (kitkat) but all I have in android 4.1 and 4.2 is default farsi fonts.
here is my code but I tried every other possible variations even using Base64 encoded fonts into my css.
#font-face {
font-family: 'B Yekan';
src:url('../fonts/byekan.eot?#') format('eot'),
url('../fonts/byekan.woff') format('woff'),
url('../fonts/byekan.ttf') format('truetype');
}
h2,h1,h3 {
direction:rtl;
font-family:B Yekan,'B Yekan'!importan;
}
I tried to move the fonts into asset folder or even put fonts near my css and index.html, no chance. I think it's a bug with android 4.x webview (except kitkat) but I have no idea what I can do for this. every kind of help is appreciated.
I experienced the same. The strangest of all is that if the font is applied to general tags like body or label it works! Just not when using the H or P tags.
So it can't be a render or location issue, but I haven't found a solution yet either.
UPDATE:
It seems like Android 4.2 has an issue with text-rendering set to optimizeLegibility. Which in my case foundation does in the background. Setting it to auto solved it here.
Found it here:
font-face on android 4.0.x doesn't work
Today I noticed that all of my webpages crash the stock browser on my HTC. After some debugging I found that text-rendering: optimizeLegibility; causes this. After removing it from my code everything worked alright.
Can somebody confirm this? Is there anything I can do about it?
I had issues with text-rendering on Nexus 7, using a WebView (which basically is the stock browser).
It didn't crash anything, but it ignored all font-family declarations in the CSS. It just used the default font on everything.
I've been writing a small app that basically loads its content from locally stored HTML and CSS into a WebView. I initially started this when I had a device running Android 2.3 and had no issues. I recently got a Galaxy Nexus but the CSS doesn't appear to load in ICS.
I read something that suggested enabling hardware acceleration would help but it does nothing. I'm now at a complete loss. Javascript seems to load fine so, combined with it working well on 2.3, suggests it's not the way I'm loading the CSS.
Has anybody seen anything similar? The app is unusable without some touch-friendly CSS.
Thanks in advance.
Edit: Ideally, I need this to work on all versions of android from 2.2+. Not sure if it makes a difference but I thought it might be relevant.
Found the issue! It turns out that there is a rather big bug in the browser for ICS and presumably Honeycomb based on a test. In the logcat I get the following error: Unknown chromium error: -6. Removing the querystring solves the issue (although screws up my functionality). There is a bug report for it here if anyone else is having the same issues.