Yes, it’s possible.

I did it something similar using the following CSS (the typography classes in Vuetify.js have been renamed recently — this might need to be slightly changed):

#app.v-application,
#app.v-application .display-4,
#app.v-application .display-3,
#app.v-application .display-2,
#app.v-application .display-1,
#app.v-application .headline,
#app.v-application .title,
#app.v-application .subtitle-1,
#app.v-application .subtitle-2,
#app.v-application .body-1,
#app.v-application .body-2,
#app.v-application .caption,
#app.v-application .overline {
  font-family: var( — fontFamily, Roboto), sans-serif !important; 
}

Setting the custom property as follows:

document.documentElement.style.setProperty('--fontFamily', fontFamily)

Then you also need to load the actual font. In my case the font doesn’t change dynamically on page, but is loaded per page. Therefore I could add the following to head() function:

head.link.push({ rel: ‘stylesheet’, href: `https://fonts.googleapis.com/css?family=${this.site.fontFamily}&display=swap` })

In your case, you’d need to load the stylesheet dynamically.

I might write an article about it at some point when I find time (perhaps in September).