Phonegap app, font issue with 4.x androids - android

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

Related

font face not working on android chrome and firefox

I am having issues with the font face in CSS3. I am calling my font with the following code:
#font-face {
font-family: James Fajardo;
src: url('https://www.twoseven.nl/kurkorganicwines/wp-
content/themes/kurk/fonts/James_Fajardo.ttf');
}
The code works when using font-family: James Fajardo in my CSS on the preferred H2's or alinea's. It is also working in Chrome on my desktop. But, it is not working in Firefox or Chrome on Android mobile. Strangely enough it is working in Safari on iPhone.
Does anyone know how to fix this problem? I allready tried installing different font styles (like woff and woff2) but it is still not working on the Android device.
Thnx in advance!
Rob
Try using local path to your font. Sometimes it works.
#font-face{font-family:James Fajardo;src:url(James_Fajardo.ttf)}

Custom font working on android emulator but not on device. (Phonegap)

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.

Monospace CSS not working in Chrome for Android

I'm trying to render code in monospace on my personal web site. The following CSS style works on desktop browsers (and Firefox for Android) without issues, but fails on Chrome for Android:
.code {
font-family:Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Adding Droid Sans Mono does not help:
.code {
font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Simply using font-family:monospace works correctly on Chrome for Android, but by doing so, I lose the ability to use specific fonts on desktop operating systems.
How do I get code to display with a monospaced font on Android without losing the ability to use specific fonts on other platforms? I don't want to use custom fonts as suggested by the answer to this question, I just want to use the monospaced font provided by the system.
For reference, the style file is here.
Chrome can't access Droid Sans Mono by specifying the name that way, monospaced is mapped directly to the Droid Sans Mono font already.
It now works after updating to Chrome 30. Looks like a browser bug after all...
The default monospace font can be modified in the web browser settings. It also depends on the operating system being used.
To ensure consistent results, you need to load your own font.
What worked for me is:
#import url('https://fontlibrary.org/face/dejavu-sans-mono');
.monospace {
font-family: 'Dejavu Sans Mono', monospace;
font-variant-numeric: tabular-nums lining-nums;
font-kerning:none;
}

text-rendering: optimizeLegibility crashes Android stock browser

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.

Why some fonts don't render on some android stock browsers?

Why do some fonts render on some stock android browsers and not other stock android browsers? For example, I bought the Have a Nice Day font from myfonts.com and unzipped the package here:
http://jl.evermight.com/myfont/StartHere.html
The font appears fine on my friend's S3, but it appears as Arial on my Galaxy Note (version 1). I upgraded my Galaxy Note OS to 4.0.4. So it's not that old.
What can I do to my css, or webserver, or html code etc... to force the font to render properly on all modern android stock browers?
The problem has been fixed. Apparently there was a bug on myfonts.com that corrupted my font files. I contacted myfonts.com and they corrected the issue right away. Then re-sent me the font files. Now everything works perfectly.
The guys at myfonts.com are amazing. Very good customer + tech support services.

Categories

Resources