Add custom fonts to your app



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



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



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



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



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



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


Log in to reply