custom font not working in phonegap

Question

I'm trying to use custom font in phone gap using-

@font-face {
font-family: "customfont";
src: url("./fonts/CFBacktoSchool-Regular.ttf") format("truetype");   
}
body {
    font-family: "customfont";
}

but it does not work for me.
What is the problem? Help me please!

possible duplicate of [Custom Fonts in Android PhoneGap](http://stackoverflow.com/questions/12454681/custom-fonts-in-android-phonegap) — Sebastian Mach, Oct 24 '14 at 09:25

Reza · Answer 1 · 2014-11-20T07:58:14.790

2

finally I overcome this issue on Persian And Arabic custom fonts,

Keep all the codes with @fontface as same as it is, Download this package http://averta.net/labs/fa/?p=10

From extracted archive, add bifon-1.1b.js to your html and use this script

function onDeviceReady() {

    $('#txt1').text(FarsiStyle.convert('سلام عليكم').split('').reverse().join('').split(' ').reverse().join(' '));

}

which txt1 is a div or span.

edited Nov 20 '14 at 07:58

answered Sep 28 '14 at 11:11

Reza

18,865
13
88
163

salam mohandes, khoshhal misham ba ham connect bashim dar morede barnamenevisi Phonegap – SalmanShariati Nov 19 '14 at 19:32
@Salman since I don't know if it is legal to put my email address here or not, we can be connected via LinkedIn. – Reza Nov 20 '14 at 07:59

score 0 · Answer 2 · answered Dec 02 '14 at 11:29

The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".

Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.

For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only

Example :

.demo {
   font-family: anmol
}
@font-face {
   font-family: anmol;
   src: url(../fonts/anmol.ttf);
}

custom font not working in phonegap

2 Answers2