Custom fonts not loading in qtwebview based app?

[poVoq]

See issue on my tracker: https://github.com/poVoq/conversejs-ubports/issues/3

I tried overwriting the existing font, and if I do that on a regular browser it seems to work, i.e. if I open the inspector it shows the changed font name. But in the UT app it stays the same, only these small rectangular for missing font are shown.

[poVoq]

Is there a reason that even if I set "Terminal=true" in the .desktop file, I can not see any terminal output when starting the app (with "ubuntu-app-launch") from the terminal?

[poVoq]

@joe said in Custom fonts not loading in qtwebview based app?:

I'm not sure about begin able to debug. I also am looking for that.

Ok here are some options: http://docs.ubports.com/en/latest/appdev/webapp/webdebug.html

Edit: ok that helps. In my case it turned out to be a specific ConverseJS issue
Edit2: ok in addition there is an issue specifically with FontAwesome and qtweb it seems, but after providing it with full paths it is somehow working.

[poVoq]

This is rather annoying. The only way after hours of trial and error to get the Fontawesome fonts to load seems to be to hard-code the path in a CSS overwrite file. With that the app works fine.

However now the clickable automatic review process complaints about the hard-coded path and is preventing me from publishing the app in the Open-Store.

Errors
------
 - lint:hardcoded_paths
	Hardcoded path '/opt/click.ubuntu.com/' found in '/tmp/review-n4ky311x/www/css/mobilefixes.css'.

Any suggestion how to prevent that?

[geekvine]

why not just add the following to index.html?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

I'd be happy to do a PR if you want.

[poVoq]

Hmm, yes that might be a work around, but I don't like the privacy implication, as right now the app only communicates with the specified XMPP server and is otherwise "offline".

I think there just needs to be some sort of path placeholder that tells the app a full path without really being one... like the shortcut to the home directory, just for the app container instead.

[poVoq]

I am wondering if there is a way to replace:

src: url('/opt/click.ubuntu.com/conversejs.povoq/current/www/dist/webfonts/fa-regular-400.ttf') format('truetype');

With something like:

src: url('$CLICK/www/dist/webfonts/fa-regular-400.ttf') format('truetype');

As also implied here for snaps:
https://forum.snapcraft.io/t/hard-coded-absolute-paths/12987

[geekvine]

sure so download font-awesome-min.css and use the local href

[poVoq]

@geekvine said in Custom fonts not loading in qtwebview based app?:

sure so download font-awesome-min.css and use the local href

If relative paths would be working in this specific case (no idea why), then I didn't have the issue

[geekvine]

@poVoq lol good point...if i get some time this weekend i'll fork the repo and take a look on my machine.