icon fonts in android webview

522 views
Skip to first unread message

greg.t...@gmail.com

unread,
May 2, 2014, 12:46:21 PM5/2/14
to ico...@googlegroups.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

unread,
Sep 17, 2015, 10:00:54 AM9/17/15
to IcoMoon
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

unread,
Sep 17, 2015, 10:48:23 AM9/17/15
to IcoMoon
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

unread,
Sep 18, 2015, 4:53:03 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 5:00:23 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 5:04:06 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 5:32:08 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 5:41:05 AM9/18/15
to IcoMoon
(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

unread,
Sep 18, 2015, 6:14:31 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 6:28:55 AM9/18/15
to IcoMoon
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

unread,
Sep 18, 2015, 6:30:32 AM9/18/15
to IcoMoon
Good to know! Thanks for the follow-up.
Reply all
Reply to author
Forward
0 new messages