CODEWITHSUNDEEP
androidcsscordovafonts
axsauze
axsauze

Reputation: 341

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

Upvotes: 3

Views: 2695

Answers (1)

axsauze
axsauze

Reputation: 341

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.

Upvotes: 1

Related Questions