Custom fonts not loading in qtwebview based app?

geekvine

i'm using a custom font on Newsie and declare it as such in fonts.css:

@font-face {
  font-family: "Lato-Light";
  src: url("../fonts/Lato-Light.ttf") format("truetype");
}

then import it into style.css and declare it (for example):

@import url(gaia/fonts.css);

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	font-family: "Lato-Light";
}

Feel free to take a look at the source code if it helps.

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.