Add custom fonts to your app
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
whe use my class to an element, the font does not change
Quasar CLI v0.6.2
App running on Quasar v0.13.10
Martin last edited by
This was caused by a typo, wasn’t it?
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?
arjanski last edited by
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
common.variables.stylfile 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
@israel965 I ran into the same problem. I finally got the fonts working in “build” distros by providing relative paths from
So instead of
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.
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.
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.
robertvincent last edited by
Though its nice explanation, but I didn’t worked for me. I cant understand how do I solve it.
Hi everyone for people with recent version, my solution was
Put your custom font, here:
and load it like this for example in app.scss:
And in the quasar.conf.js, you should comment the 2 last lines like this screen:
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) :
Hope it helps, cheers!
Sorry, in my previous post you should only comment in quasar.conf.js, the line with “roboto-font” and decomment “material-icons”
@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.