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.
Related
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.
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 using Google Webfont Roboto and Yanone on my Wordpress blog. I'm using WP enqueue to load the fonts:
wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500|Yanone+Kaffeesatz:400,700', array(), null );
wp_enqueue_style( 'google-fonts' );
Now the strange behavior is as follows:
The font loads (I can see that on my dev tools). But it doesn't show.
When I hover on the Yanone font, it shows up mysteriously.
When I hover on the Roboto font, it doesn't show up. But when I right click on it, It shows up.
Also, if I open the dev tools/inspect element, the font shows up.
There's no way to show the fonts on Chrome for Android.
It works fine in all browsers except Google Chrome. (both on Windows and Android phone)
Strangely, it was working fine with Chrome too but suddenly it stopped working. (probably after Chrome updated)
I'm racking my brains apart with the issue. Nothing seems to fix it. Shame that Google can't render its own fonts properly while Firefox etc. has no problem.
Can someone please help me with a workaround? I'm stuck. :(
p.s. I'm using W3 Total Cache plugin. Just FYI.
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
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.