No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

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

    Add custom fonts to your app

    Show & Tell
    fonts stylus
    13
    17
    14710
    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.
    • arjanski
      arjanski last edited by

      @Martin Thanks a lot! Do you know if this would also work out-of-the-box with other font files such as .woff or .otf?

      1 Reply Last reply Reply Quote 0
      • arjanski
        arjanski last edited by

        Answered the question myself: it works indeed! No other webpack configuration neccessary, at least for .woff.

        1 Reply Last reply Reply Quote 0
        • V
          venkyvb last edited by

          Hi: Was trying this out, however, this seems to give a build error. This is what I have done:

          I copied the fonts over to /themes/fonts/OpenSans.ttf

          in the common.variables.styl file I have aaded the following:

          @font-face
            font-family OpenSans
            src url(fonts/OpenSans.ttf)
          

          During the build I get the following error:

           ERROR  Failed to compile with 2 errors                                                                                             11:07:04
          
          This relative module was not found:
          
          * ./fonts/OpenSans.ttf in ./node_modules/css-loader??ref--12-1!./node_modules/postcss-loader/lib??ref--12-2!./node_modules/stylus-loader??re
          f--12-3!./.quasar/app.styl, ./node_modules/css-loader??ref--12-1!./node_modules/postcss-loader/lib??ref--12-2!./node_modules/stylus-loader??
          ref--12-3!./src/pages/docs-input.styl
          

          Quasar CLI v0.15.14
          Quasar version is 0.17

          I 1 Reply Last reply Reply Quote 0
          • I
            israel965 @venkyvb last edited by israel965

            @venkyvb must be

            @font-face
              font-family OpenSans
              src url(/fonts/OpenSans.ttf)
            

            It works fine with the dev command, but when I execute the build command, the fonts stop working 🤔. Any idea @rstoenescu?

            T 1 Reply Last reply Reply Quote 2
            • T
              terrybradshaw @israel965 last edited by

              @israel965 I ran into the same problem. I finally got the fonts working in “build” distros by providing relative paths from quasar/.quasar

              So instead of src url(/fonts/OpenSans.ttf)
              try src url(../src/css/themes/fonts/OpenSans.ttf)
              obviously, customize the path to your font files, but keep them relative, not absolute

              I will note this is probably only a good idea for local apps such as electron or mobile apps. Webpack will rename font files, so that cached versions of the fonts cannot be used, which, for a web site, will slow down time to load the initial page significantly.

              1 Reply Last reply Reply Quote 2
              • kosirm
                kosirm last edited by kosirm

                Thanks @Martin for posting this simple guide. I use this nice font installer https://github.com/lordgiotto/google-font-installer so using google fonts in QUasar is a breeze. Besides this I use excellent AI based https://fontjoy.com/ for font pairing, because I’m pretty talentless for font pairing 🙂
                I think it is the same guy who stands behind http://colormind.io/ which is also an excellent AI based color palette generator.

                1 Reply Last reply Reply Quote 0
                • W
                  walfin last edited by

                  Not working for me. I get the following error:

                  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
                  ModuleNotFoundError: Module not found: Error: Can't resolve '../assets/fonts/Purisa-Bold.ttf' in 'C:\Users\User\Downloads\covid_game\node_modules\quasar\dist'
                  

                  I have Purisa-Bold.ttf in src/assets/fonts and my @font-face declaration in src/css/quasar.variables.styl is:

                  @font-face
                  	font-family Purisa
                  	font-weight bold
                  	font-style normal
                  	src url(../assets/fonts/Purisa-Bold.ttf)
                  

                  If I use an absolute path of /src/assets/fonts/Purisa-Bold.ttf, it works in dev but not on Android. The funny thing is that when I’m using the relative path, it shows that Purisa-Bold.ttf is being bundled.

                  I have temporarily solved it by symlinking my assets folder into node_modules/quasar, but that is obviously a hacky and unsatisfactory solution.

                  1 Reply Last reply Reply Quote 0
                  • T
                    TylerFryer last edited by

                    I tried adding additional fonts in Photoshop several times. I did it through the Windows settings. I managed.

                    T 1 Reply Last reply Reply Quote 0
                    • T
                      TylerFryer @TylerFryer last edited by

                      @TylerFryer said in Add custom fonts to your app:

                      I have tried several times to add additional fonts to Photoshop for page decoration. Made through Windows settings. I succeeded.

                      I recommend trying my method. Perhaps this will solve your problem.

                      1 Reply Last reply Reply Quote 0
                      • robertvincent
                        robertvincent last edited by

                        Though its nice explanation, but I didn’t worked for me. I cant understand how do I solve it.

                        1 Reply Last reply Reply Quote 0
                        • S
                          strife-cloud last edited by strife-cloud

                          Hi everyone for people with recent version, my solution was

                          Put your custom font, here:
                          5b7b6c16-b3d2-4282-9f97-9f2582694b30-image.png

                          and load it like this for example in app.scss:
                          f3fb6996-053c-4ced-a79a-dd6f02a91021-image.png

                          And in the quasar.conf.js, you should comment the 2 last lines like this screen:
                          ebf7be1b-0957-41a3-9177-bec4fec1118a-image.png

                          In the documention, there is a typo, instead of path ‘./src/css/fonts/[customfont.woff]’, it should be ‘./public/fonts/[customfont.woff]’ and there sould be no dot at the beginning of the path in url e.g: url(’/blabla’) not url(’./blabla) :
                          https://quasar.dev/style/typography#add-custom-fonts

                          Hope it helps, cheers!

                          B 1 Reply Last reply Reply Quote 1
                          • S
                            strife-cloud last edited by

                            Sorry, in my previous post you should only comment in quasar.conf.js, the line with “roboto-font” and decomment “material-icons”

                            1 Reply Last reply Reply Quote 1
                            • B
                              Brew @strife-cloud last edited by

                              @strife-cloud Absolutely spot on. I’d worked out the cryptic “Cant resolve … quasar/dist” had something to do with the static files. Your solution was probably the only option I hadn’t tried! It’s a shame the documentation is still wrong.

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post