Navigation

    Quasar Framework

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

    Add custom fonts to your app

    Show & Tell
    fonts stylus
    11
    14
    9408
    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.
    • rstoenescu
      rstoenescu Admin last edited by

      Thank you for adding this tip here for all Quasar dev! And nice ending screenshot 😃

      1 Reply Last reply Reply Quote 0
      • R
        rashidnk last edited by rashidnk

        it does not work for me

        i copied font file to themes/fonts

        //app.variables.styl
        @font-face
        font-family myfont
        src url(fonts/Chilanka-Regular.ttf)

        //Index.vue
        <style>
        .myclass {
        font-family: myfont;
        font-size: 30px
        }
        </style>

        whe use my class to an element, the font does not change

        Quasar CLI v0.6.2
        App running on Quasar v0.13.10

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

          This was caused by a typo, wasn’t it?

          1 Reply Last reply Reply Quote 0
          • 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
                            • R
                              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
                              • First post
                                Last post