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

      Here are the steps:

      1. put your fonts in a directory of choice eg: ./src/themes/my/cool/fonts/…
        0_1474990798781_upload-5515946f-18cd-425e-abb7-1da8c02839da

      2. declare your font in ./scr/themes/app.variables.styl. This is also the place where your can modify other parts of your theme. (or in app.ios.styl, app.mat.styl, if you have platform specific ideas)
        Also notice the stylus syntax! (more over here http://stylus-lang.com/)
        0_1474991033159_upload-c1d9ba95-a5be-4e7f-a83d-820879c9964c

      3. reference your font with css in a vue component <style>…</style>
        0_1474991138724_upload-48b67afa-97af-4e7e-8d67-f71abd29f2e2

      4. when doing “quasar dev”, webpack should list your font after bundling.
        0_1474991504055_upload-dfe65876-014b-4516-bb6c-8bfe9a4ee9bf

      5. that’s all 😉
        0_1474991410859_upload-97ad385d-8dd6-4cb5-92ee-1493e545c25a

      1 Reply Last reply Reply Quote 9
      • 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
                              • 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