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

    Use custom font in quasar app

    Framework
    2
    3
    2593
    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.
    • R
      rashidnk last edited by

      i want to add my custom font in quasar project, i tried to do this following this guide
      add-custom-fonts-to-your-app/2 , but it does not work for me, please help

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

        Did you look into the stylesheets that are generated using Chrome DevTools or something similar?
        Maybe your style definition gets overwritten by a definition with higher precedence.
        If the font could not be loaded you should also see a 404 error in the network tab.

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

          ok, that was solved

          i forgot uncomment this in main.js
          require(./themes/app.${__THEME}.styl)

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