androidfont-faceionic-frameworkthaisoutheast-asian-languages

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


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!


Solution

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

    1. Android fonts do not support Lao glyphs (contrary to iOS for instance) so it will display blanks instead if no custom font is used.
    2. 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 :[