[FIXED] @font-face do not work unicode Malayalam in android Cordova


In android @font-face do not work for UTF character.(Webpage hosted in web control using cordova)
The code works on chrome browser both on android as well as desktop.
It do not apply the changes in the application.
Observed that if there are no UTF characters then font styling was applied. Also observed that only the lines that has got UTF it is not applied with the web font style.
It was an indication that the path provided in font-face was correct.
Tried changing the UTF character to the encoded hex value and it did not help.


The Problem

In Android 4.3 the character " ്ര "details about this issue and work around is given here
I require this for Android app developed using cordova(phonegap) and hence rooting and installing is not an option.
I tried to do web view with embedded font (@font-face) and strangely, it is not working for web view in android, but works perfectly in browser of the same device.

The Solution

Got a hint from this stack over flow and this was pointing to this Solution, and thank you for that

Basically We need to get an ASCII based font and convert the unicode to mapping ASCII.
The solution provided was using JAVA and always a chance of missing some characters. Another problem that i faced using this solution was, if there is a mix of English and Malayalam character then the solution give undesirable results.

So I created this jquery plugin

Basically It does the following.

  1. Identify the longest possible Malayalam character sequence and wrap them using tag with configurable class name.
    This process separate English and non English groups.
  2. Each grouped Malayalam character sequence then converted to ASCII using a configurable mapping w.r.t the font.

    The problem of Mix of English and Malayalam is solved, problem of missing some character is fixed, and also @font-face is working. I was able to create 2 fonts mapping.
    So far the solution is working for me.
    I feel some level of optimization can be done.

Answered By – kirant400

Answer Checked By – Pedro (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *