Search code examples
csscordovaunicodefontsfont-face

How to properly parse Devanagari / Hindi for @font-face

Starting with this string :

वृत्तयः पञ्चतय्यः क्लिष्टाक्लिष्टा

I'm trying to render it on my mobile device ( via Cordova / PhoneGap ).

On my browser ( localhost:8000 ), it shows up fine. Just as it shows up fine in the example. But on my device, it looks like this :

enter image description here

It is definitely adopting my font ( Karma-Light ) because I notice the aliasing is finer than the default Helvetica, sans-serif, etc.

My CSS looks like this :

@font-face {
    font-family: 'Karma';
    src: local('Karma'), url('../fonts/Karma-Light.ttf') format('truetype');
    unicode-range: U+0900–097F;
    font-weight: normal;
    font-style: normal;
}

.devanagari { font-family: 'Karma', Helvetica, Arial, sans-serif; }

I've tried a variety of different unicode-ranges, as well as omitting a unicode-range but everything manifests in the same manner.

Any ideas?

Solution

  • Just in case anyone gets stuck here!

    Open up your index.html in your /src/

    And make sure it says this!

    <meta charset="utf-8" name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    Declaring the charset makes it work.