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!
Found the root cause but unfortunately this is not good news:
Not good news, hoping that Google will patch other android versions :[