Custom fonts not loading in qtwebview based app?

  • 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:

    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:

    	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")

  • I followed this example:

    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.

  • 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.

  • See issue on my tracker:

    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.

  • 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?

  • @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:

    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.

  • 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.

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

    Any suggestion how to prevent that?

  • why not just add the following to index.html?

    <link rel="stylesheet" href=""/>

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

  • 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.

  • I am wondering if there is a way to replace:

    src: url('/opt/') format('truetype');

    With something like:

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

    As also implied here for snaps:

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

  • @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 😞

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

Log in to reply