Custom fonts not loading in qtwebview based app?

poVoq

EDIT: Turns out this was a specific issue with ConverseJS that I fixed. But now I still struggle with absolute paths

I am currently building a qtwebview based HTML5 app which works fine in a regular browser and in Morph, see:
https://github.com/poVoq/conversejs-ubports

It loads a lot of custom fonts via a css file, but it seems like in a container like this app this fails somehow?

Did anyone ever come across a similar issue when building HTML5 apps and could give me a hint how to solve this?

Please note that this is my first app ever, so please keep in mind that I might be just stupid about it

Thanks a lot!

Edit: is there some way to debug such apps? Like a browser console or some sort of debugging output I can access?

Edit2: the CSS script in question seems to be:

@font-face{
	font-family:ConverseFontAwesomeSolid;
	font-style:normal;
	font-weight:900;
	src:url(/dist/webfonts/fa-solid-900.eot);
	src:url(/dist/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
	url("function(o) {\nvar __t, __p = '';\n__p += '<!-- sass/webfonts/fa-solid-900.svg -->\nmodule.exports = __webpack_public_path__ + \"webfonts/fa-solid-900.svg\";';\nreturn __p\n}#fontawesome") format("svg"),
	url(/dist/webfonts/fa-solid-900.woff2) format("woff2"),
	url(/dist/webfonts/fa-solid-900.woff) format("woff"),
	url(/dist/webfonts/fa-solid-900.ttf) format("truetype")
}

joe

I followed this example:
https://github.com/mateosalta/cuddly-bassoon/tree/master/app

It has an ubuntutheme.js, which seems to inject some kind of CSS, including a font.

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

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.