icon fonts in android webview

[greg.t...@gmail.com]

We just implemented icomoon icon fonts in our web app, and the work perfectly except in android webview. Has anyone gotten icon fonts to render inside an android app that displays a url using webview?

[Josip]

Having the same problem in 2015. It seems to be a Android 4.4 issue. On some devices it shows nothing while on some it displays random Chinese characters. Have you had any luck in solving this issue?

[Keyamoon]

When did you generate your font? Do you see this issue in the generated "demo.html" file too? Every font pack generated using the IcoMoon app contains this demo.html file.

[josip...@gmail.com]

The font was generated just yesterday unfortunately. The demo.html doesn't work either, all I see are funny characters or blanks.

Here's a screenshot from HTC One mini 2 running Android 4.4.2:

http://f.cl.ly/items/0y2B2P2d2t032y0a0529/Screenshot_2015-09-18-10-34-35.png

On a Samsung Galaxy Note II (GT-N7100) with same version of Android, all icons are blank:

http://f.cl.ly/items/2V273C0A1s2L001e3C3G/Screenshot_2015-09-18-10-44-13.png

[josip...@gmail.com]

Just wanted to note that we were using FontAwesome 3.2.1 before and it still works fine even on these devices. From some googling around it seems that the issue is in TTF files not being properly encoded, if that means anything to you.

[Keyamoon]

Are you testing actual Andoird devices? Please check if you see the icons used on https://icomoon.io

It is possible that some of the settings of your font may be causing the problem. I will try to reproduce this issue later today.

[Keyamoon]

I made another reduced test case, if you want to give it a try: http://icomoon.io/rtc/demo.html

This one doesn't use an embedded TTF.

In case you are hosting your font on a different domain than your web page, you need to set CORS headers as explained here in the docs: http://icomoon.io/#docs/cors

[josip...@gmail.com]

(it's real devices)

The reduce test case does work when it's served from your website, but as soon as we serve it from the app's resources it does not work.

http://f.cl.ly/items/1C0g3Y1T1M0V0T0b3X1n/Screenshot_2015-09-18-11-30-01.png

(To clarify, there's a HTTP server in the app itself and files get loaded through it in the webview. Since it all worked fine with FontAwesome fonts we don't see why these wouldn't work.)

[Keyamoon]

I don't have any experience with webview; but IcoMoon generates TTF fonts according to the spec and they pass validation tests.

I made another font which uses the same "fsType" flag as FontAwesome does. It is possible that this flag might be causing the problem in webview. Please try this font and let me know if it works in webview: http://icomoon.io/rtc2/demo.html

[josip...@gmail.com]

So after a bit of digging it turned out one of the URL parsing libraries deep in the stack was not doing it's job properly, it was choking on the query parameter in the font URL:

`fonts/rtc.ttf?tptr4h`

the `?tptr4h` was the problem as the library expect it to have a value. Removing the query param altogether or doing `?tptr4h=0` fixed the issue and now the fonts load all right.

(library in question is https://github.com/palominolabs/url-builder)

Thanks for helping out!

[Keyamoon]

Good to know! Thanks for the follow-up.