Add custom fonts to your app
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
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.