Add custom fonts to your app

  • Here are the steps:

    1. put your fonts in a directory of choice eg: ./src/themes/my/cool/fonts/…

    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

    3. reference your font with css in a vue component <style>…</style>

    4. when doing “quasar dev”, webpack should list your font after bundling.

    5. that’s all 😉

  • Admin

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

  • it does not work for me

    i copied font file to themes/fonts

    font-family myfont
    src url(fonts/Chilanka-Regular.ttf)

    .myclass {
    font-family: myfont;
    font-size: 30px

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

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

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

  • @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?

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

  • 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-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??

    Quasar CLI v0.15.14
    Quasar version is 0.17

  • @venkyvb must be

      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?

  • @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.

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

Log in to reply