Ionic app does not display lao/thai characters on Android device

Question

I am developing an application that uses a webfont to display thai/lao characters. To do so I am defining a custom font-face as follows:

@font-face {
  font-family: 'SaysetthaWeb';
  src: url('./saysettha-web.eot') format('embedded-opentype');
  src: url('./saysettha-web.eot?#iefix') format('embedded-opentype'),
       url('./saysettha-web.woff')  format('woff'),
       url('./saysettha-web.ttf')  format('truetype'),
       url('./saysettha-web.svg#SaysetthaWeb') format('svg');
  font-weight: normal;
  font-style: normal;
}

Now when I test this on the ionic webserver with ionic serve it works very well on Firefox and Chrome: I can see the font is loaded, and the characters are displayed properly (I work on Mac OS X Mountain Lion).

Then when I test the same on my android device (Galaxy Nexus with Android 4.2.1 Jelly Beans) with ionic run android the thai/lao characters don't show but there is a blank space instead.

I tested my webfont/font-face CSS code by loading a symbol font to check that the letters are replaced by symbols on the web borwser as well as on the android device and it worked well.

I have tried to fix the meta tags on index.html, but it did not work:

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

I also tried to use hex codes instead in the source of my html pages, but the result was the same.

I am really puzzled... any idea??

Thanks!

it does not work unfortunately. I actually think the webfont loads properly but it is the display of special characters (non latin a-zA-Z...) which seems to be the problem on the Android device, and I cannot figure out why. — ceyquem, Jul 21 '14 at 23:21
One more thing: I use the same webfont on a normal website, and I can see it properly when I browse this website from my android device using Chrome browser — ceyquem, Jul 21 '14 at 23:38

score 0 · Accepted Answer · answered Jul 25 '14 at 23:05

Found the root cause but unfortunately this is not good news:

Android fonts do not support Lao glyphs (contrary to iOS for instance) so it will display blanks instead if no custom font is used.
Android stock browser does not support @font-face CSS, this has been fixed on Android 4.4 but still impacts all other Android 4.x versions (67% of devices!)

Not good news, hoping that Google will patch other android versions :[

Ionic app does not display lao/thai characters on Android device

1 Answers1