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)}
Related
I have implemented a website using AngularJs. I used several fonts including cambria and calibri using font-family, The fonts are working perfect on Webiste and even on Ios Mobiles (Safari browser) however the same is not working on any Android device i have checked for all android versions and browsers
i have used
font-family : cambria
in css.
Any help will be appreciated. Thanking you.
Android devices generally don't have the font Cambria installed on their systems, so the Android browsers can't display text with this font.
You can use a CSS font stack so that if one font is not installed the browser will try to use the next one:
font-family: Cambria, Georgia, serif;
Or you can look at Web Fonts.
On your website, put the font Cambria at a url like /cambria.ttf. Then you can use it in CSS like:
#font-face {
font-family: 'MyCambria';
src: url('webfont.ttf') format('truetype');
}
Now use
font-family: Cambria, 'MyCambria', serif;
I have a strange issue which Chrome.
I've defined my font-family like this:
font-family: Tahoma,Helvetica neue,Helvetica,Arial,sans-serif;
This works just fine in all browsers on Mac,Windows,iOS and Android. Excpet of Google Chrome in Android.
Via remote debuggin, I figured out that Chrome renders the font Roboto. I have absolutly no idea why this is happening, since I never used this font in my CSS.
Does anyone know why Chrome is doing this? Alle other browsers are using Tahoma but Chrome uses Roboto without any particular reason.
I am currently using JQuery Mobile 1.4.0 for a PhoneGap Application but I have this problem of corners not forming properly (they are flat instead of curving). When am using JQuery Mobile 1.3.2, it does not have this problem. I have tried downgrading/upgrading the Jquery.js library but am still to find a solution, I have even created my own theme and still no solution. Below is a screenshot of what am talking about.
Note:
- All libraries are attached properly
- It works well on Firefox and chrome desktop browser
- I am testing on Android 4.2.1
Thanks, any help will be appreciated.
On .ui-corner-all, try adding this...
.ui-corner-all{
border-top-left-radius: .3125em;
border-top-right-radius: .3125em;
border-bottom-left-radius: .3125em;
border-bottom-right-radius: .3125em;
}
I found this post: Galaxy S4 stock browser CSS3 border-radius support?
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