• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Register
  • Login
UBports Robot Logo UBports Forum
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Register
  • Login

Custom fonts not loading in qtwebview based app?

Scheduled Pinned Locked Moved App Development
13 Posts 3 Posters 700 Views 1 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P Offline
      poVoq
      last edited by poVoq 24 Nov 2019, 22:33

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

      Fairphone 5 (waiting for port)

      1 Reply Last reply Reply Quote 0
      • J Offline
        joe
        last edited by 25 Nov 2019, 04:27

        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.

        P 1 Reply Last reply 25 Nov 2019, 15:54 Reply Quote 0
        • G Offline
          geekvine
          last edited by 25 Nov 2019, 05:42

          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.

          1 Reply Last reply Reply Quote 0
          • P Offline
            poVoq
            last edited by 25 Nov 2019, 11:20

            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.

            Fairphone 5 (waiting for port)

            1 Reply Last reply Reply Quote 0
            • P Offline
              poVoq
              last edited by poVoq 25 Nov 2019, 14:09

              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?

              Fairphone 5 (waiting for port)

              1 Reply Last reply Reply Quote 0
              • P Offline
                poVoq @joe
                last edited by poVoq 25 Nov 2019, 15:54

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

                Fairphone 5 (waiting for port)

                1 Reply Last reply Reply Quote 0
                • P Offline
                  poVoq
                  last edited by poVoq 25 Nov 2019, 21:15

                  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?

                  Fairphone 5 (waiting for port)

                  1 Reply Last reply Reply Quote 0
                  • G Offline
                    geekvine
                    last edited by 25 Nov 2019, 23:10

                    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.

                    1 Reply Last reply Reply Quote 0
                    • P Offline
                      poVoq
                      last edited by poVoq 26 Nov 2019, 08:59

                      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.

                      Fairphone 5 (waiting for port)

                      1 Reply Last reply Reply Quote 0
                      • P Offline
                        poVoq
                        last edited by poVoq 26 Nov 2019, 12:07

                        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

                        Fairphone 5 (waiting for port)

                        1 Reply Last reply Reply Quote 0
                        • G Offline
                          geekvine
                          last edited by 26 Nov 2019, 15:20

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

                          P 1 Reply Last reply 26 Nov 2019, 15:32 Reply Quote 0
                          • P Offline
                            poVoq @geekvine
                            last edited by poVoq 26 Nov 2019, 15:32

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

                            Fairphone 5 (waiting for port)

                            G 1 Reply Last reply 26 Nov 2019, 16:25 Reply Quote 0
                            • G Offline
                              geekvine @poVoq
                              last edited by 26 Nov 2019, 16:25

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

                              1 Reply Last reply Reply Quote 1
                              7 out of 13
                              • First post
                                7/13
                                Last post