3

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...

axsauze
  • 343
  • 4
  • 14
  • 1
    if you haven't already, try putting your css in `/css` and your font file in `/fonts` and then in your css reference your font file with `../fonts/` – Dawson Loudon Feb 28 '14 at 19:06
  • Good evening Dawson - thank you very much for your reply. I have actually tried this, unfortunately, again, it works on my emulator, but not in my device... Do you think the problem is with my device? – axsauze Feb 28 '14 at 19:30
  • Typically with Android these type of issue are related to pathing, but it sounds like this may be a file type issue. Do you have other file type for your font? I just checked my latest project and the designer included `.svg, .ttf and .woff`. When inspecting the app on Android I see that the webview is choosing the `.woff` files for display. – Dawson Loudon Feb 28 '14 at 19:47
  • I just tried including the woff, svg, ttf and otf, with no success - I'm quite sure there is an issue with pathing, but I don't know why this is not working :/ but it is actually working on the emulator perfectly... as mentioned in the post I also tried referencing them from the file:///android_asset/fonts but it did not work (I did copy the fonts folder to the assets/ folder next to the assets/www/... – axsauze Mar 01 '14 at 00:40

1 Answers1

1

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.

Community
  • 1
  • 1
axsauze
  • 343
  • 4
  • 14