quasar-frameworkquasar

Quasar - how to change font (size, family) programmatically?

I would like to create a "UI settings" page where user could set sm, md or lg font size, and pick a custom font for the quasar app.

Now, I know one can change colors to implement a similar task of UI themeing using:
https://quasar.dev/style/color-palette#util-setcssvar
but how can I achieve the same for the body font size, possibly also for space-base, typography-font-family etc. In other words for variables listed here: https://quasar.dev/style/sass-scss-variables#variables-list

I know I can override them statically (for the entire app, on build), but I would like to do that dynamically (and save it) so that each user can pick from several font families, font sizes etc.

I can do it via vanilla JS like this document.body.style.setProperty('font-size', '32px'); but I would like to tap into the quasar variables.

Solution

  • In your quasar.variables.scss file you can define

    $body-font-size   : var(--q-theme-font-size, 20px);
$body-line-height : var(--q-theme-line-height, 1.2);
$typography-font-family: var(--q-theme-font-family, "'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif");
$button-font-size: var(--q-theme-btn-font-size, 16px);

    Then you can use the above mentioned setCssVar helper function to set the desired CSS variables which will be picked up by the Quasar variables.