Add custom fonts to your app
Martin last edited by Martin
Here are the steps:
put your fonts in a directory of choice eg: ./src/themes/my/cool/fonts/…
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/)
reference your font with css in a vue component <style>…</style>
when doing “quasar dev”, webpack should list your font after bundling.
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.
Though its nice explanation, but I didn’t worked for me. I cant understand how do I solve it.