Alter the font being used when the active theme is changed?

[jsodeman]

I need to allow users to select an alternate theme that changes not only the colors but also the font being used. I have the main theme working using the Vuetify constructor's theme property and a variables.scss file. I've found how to alter the theme being used by modifying the $vuetify var, but I can't find any way to modify the font being used.

It looks like Presets might be an option, but it's not clear if you can have multiple presets added to the project and select one when calling the Vuetify constructor. Also, having to publish an npm package just to support changing the font feels overly complex if that's what is required.

Can anyone point me in the right direction?

[KaelWD]

Set the font SASS variable to a custom property then change that at runtime.

$body-font-family: var(--my-custom-font);

[jsodeman]

Thanks, I was trying to avoid CSS vars due to IE 11 support. I was able to put a class on v-app and then use that to change the font.

	.theme-test {
		&.v-application {
			font-family: "Consolas";
		}
	}

The 3 things I need in a theme are: changing the Vuetify theme colors, changing some custom SASS variables used for additional colors, and changing the font.

Stepping back, my need isn't really being able to switch between themes on the fly. Instead I need to be able to white-label a website based on the URL that's being used. Server-side I could deliver a different css bundle based on the domain name, but I'll need to figure out how to set up webpack etc to generate a bundle for each theme using a different variables.scss for each one.

These articles seem promising:
https://medium.com/trabe/multiple-css-bundles-with-webpack-75f263095f09
https://medium.com/xebia/theming-in-vue-single-file-components-7b88eaa0eb6e