Quasar: question: where to put customFont.ttf ?

[beebase]

Forgive me if I overlooked it in the docs (great source!), but how/where should I put custom fonts?
Should I use fontface in css like this?

@font-face {
    font-family: 'DevilBreezeBold';
    src: url('??/DevilBreezeBold.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }

[musicformellons]

@beebase In project/src/themes/app.variables.styl you can put:
$typography-font-family = 'Arial', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif

That will use this font for both android and ios. If you want different fonts for each then put it in the respective stylus sheet in the same folder.

[beebase]

Thanks for clarifying. But shouldn't I also put the font.ttf file in some specific directory?
One other thing. The other day I was changing some colors like $primary in app.variables.styl but the changes aren't visible (chrome browser and quasar play) when restarting with "quasar dev". Is there some cache that needs to be cleared?

[musicformellons]

Yeah, probably Razvan can tell you where best to put your .ttf file.

When you customize you need to follow the instruction in comments of the app.js file:
/*
If overriding Quasar style, leave uncommented
just the first line.
If NOT overriding Quasar style, leave uncommented
just the second line. This option make compiling faster.
WARNING!
Leave just one of the two require() calls below
uncommented.
*/

[rstoenescu]

Quasar leaves that to you to organize files however you want. But I think you are referring to "if I use this URL where should I put the font file". This is where Webpack comes into play. It automatically bundles your dependencies (even fonts!). Let's say we specify @font-face in src/themes/app.variables.styl with src url(DevilBreezeBold.ttf). Then Webpack will look for DevilBreezeBold.ttf file in the same folder (src/themes/) and add it to the bundle. The URL is parsed as being a relative path to the same folder of your CSS/Sass/SCSS/Stylus file where you declare it. Let me know if you need more clarifications.

[beebase]

ah of course. Thanks for your explanation.
I did "scan" that styling message in the app.js a couple of times but it didn't really sink in, cause I didn't need it while exploring the fun stuff (components!!) .
"yeah, we'll deal with styling later on...." ;-)
So I just didn't take the time to understand what was being said.

Maybe that message could also be made a bit more clear along something like the following lines?

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
require('./themes/app.' + __THEME + '.styl')
// 2. or, use next line to activate DEFAULT QUASAR STYLE
// require('quasar/dist/quasar.' + __THEME + '.css')
// ===========================

(And maybe more importantly: in the app.variables.style, refer to the app.js as a reminder)

[rstoenescu]

Thank you for the suggestion! Made the changes you proposed to the starter kit.

[beebase]

To everyone figuring out custom fonts (and a bit of stylus),
...I believe customizing works pretty well ;-)

font location

declare in app.variables.styl

webpack bundling

reference in vue component style

[rstoenescu]

Haha, nice one with the first screenahot. Made my day :D Would you care to post your last comment on the forum under Show & Tell?
Glad I could help.

[beebase]

http://forum.quasar-framework.org/topic/14/add-custom-fonts-to-your-app

[rashnk]

it does not work for me

i copied font file to themes/fonts

//app.variables.styl

@font-face 
    font-family myfont
    src url(fonts/Chilanka-Regular.ttf)

//Index.vue
<style>
.myclass {
  font-family: myfont;
  font-size: 30px
}
</style>

whe use my class to an element, the font does not change

Quasar CLI v0.6.2
App running on Quasar v0.13.10

[beebase]

Are you using correct spacing? Indentation is important with .styl files.
Try this link to verify your .styl (I use 2 spaces for indentation btw)
http://stylus-lang.com/try.html

[rashnk]

solved , i forgot to uncomment the custom style refrence in main.ts

[disarticulate]

is this still valid?

quasar -v 0.15.20

ERROR Failed to compile with 9 errors 17:34:34

This relative module was not found:

* ./fonts/courier-new-webfont.ttf in ./node_modules/css-loader??ref--12-1!./node_modules/postcss-loader/lib??ref--12-2!./node_modules/stylus-loader??ref--12-3!./.quasar/app.styl, ./node_modules/css-loader?{"minimize":false,"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/dataTable/tablesPageNavigation.vue and 7 others

...nevermind, fixed it.

[rstoenescu]

@disarticulate Take into consideration that you are using a path that gets processed by webpack. So if it's a relative path, is the relative path correct to the file location where it's defined? This is more of a question for the webpack forum/community.

[venkyvb]

is this still valid?

quasar -v 0.15.20

ERROR Failed to compile with 9 errors 17:34:34

This relative module was not found:

* ./fonts/courier-new-webfont.ttf in ./node_modules/css-loader??ref--12-1!./node_modules/postcss-loader/lib??ref--12-2!./node_modules/stylus-loader??ref--12-3!./.quasar/app.styl, ./node_modules/css-loader?{"minimize":false,"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/dataTable/tablesPageNavigation.vue and 7 others

...nevermind, fixed it.

@disarticulate => I am facing the same issue. What did you do to fix it?

[venkyvb]

This works if I update the app.styl file (under the /css/ folder), with the @font-face definition and set the $typography-font-family to reflect the new font families.