Search code examples
androidcordovafontsfont-facepersian

Custom Persian And Arabic Fonts in Android 4.1.2 Phonegap (Cordova) not working

I tried to make custom fonts for my application in phonegap. For that, I wrote this code in my html file:

@font-face {
font-family: 'customfont';
src: url('fonts/BMitra.eot?#') format('eot'), 
url('fonts/BMitra.woff') format('woff'), 
url('fonts/BMitra.ttf') format('truetype'); 
font-style: normal;
}
    body {
        font-family: "customfont";
        font-size:30px;
    }

....

<body>
    <h>Custom Fonts</h>
    <div style="font-family: 'customfont';" id='txt1'>This is for sample</div>
</body>

It works fine on Ripple (chrome emulator) but it doesn't work on the Device (Samsung Android 4.1.2)

I have googled and stack-overflowed to find the solution, i found this post font-face on android 4.0.x doesn't work which says to have text-rendreing:auto but it didn't work too.

Any help, will be appreciated.

Solution

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

    p.s Thanks to Mr. Morteza F. Shojaei