Navigation

    UBports Robot Logo

    UBports Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Custom fonts not loading in qtwebview based app?

    App Development
    3
    13
    207
    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.
    • poVoq
      poVoq last edited by 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")
      }
      
      1 Reply Last reply Reply Quote 0
      • J
        joe last edited by

        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.

        poVoq 1 Reply Last reply Reply Quote 0
        • G
          geekvine last edited by

          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
          • poVoq
            poVoq last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • poVoq
              poVoq last edited by 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?

              1 Reply Last reply Reply Quote 0
              • poVoq
                poVoq @joe last edited by 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.

                1 Reply Last reply Reply Quote 0
                • poVoq
                  poVoq last edited by 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?

                  1 Reply Last reply Reply Quote 0
                  • G
                    geekvine last edited by

                    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
                    • poVoq
                      poVoq last edited by 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.

                      1 Reply Last reply Reply Quote 0
                      • poVoq
                        poVoq last edited by 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

                        1 Reply Last reply Reply Quote 0
                        • G
                          geekvine last edited by

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

                          poVoq 1 Reply Last reply Reply Quote 0
                          • poVoq
                            poVoq @geekvine last edited by 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 😞

                            G 1 Reply Last reply Reply Quote 0
                            • G
                              geekvine @poVoq last edited by

                              @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
                              • First post
                                Last post