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/…
      0_1474990798781_upload-5515946f-18cd-425e-abb7-1da8c02839da

    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 http://stylus-lang.com/)
      0_1474991033159_upload-c1d9ba95-a5be-4e7f-a83d-820879c9964c

    3. reference your font with css in a vue component <style>…</style>
      0_1474991138724_upload-48b67afa-97af-4e7e-8d67-f71abd29f2e2

    4. when doing “quasar dev”, webpack should list your font after bundling.
      0_1474991504055_upload-dfe65876-014b-4516-bb6c-8bfe9a4ee9bf

    5. that’s all ;-)
      0_1474991410859_upload-97ad385d-8dd6-4cb5-92ee-1493e545c25a


  • Admin

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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.