CODEWITHSUNDEEP
vuejs3vuetifyjs3
Nanna
Nanna

Reputation: 575

Unable to change font in Vue 3

I am using Vue 3 with Vuetify 3 and so far I can't manage to change the font from Roboto to Lato.

I am a beginner in SCSS, but I have created a file called /scss/main.scss:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
$body-font-family: 'Lato';

which I import in main.js:

...
import '../scss/main.scss'
...

and then inside App.vue I have:

#app {
  font-family: $body-font-family, sans-serif !important;
}

Am I missing something here?

Upvotes: 0

Views: 606

Answers (1)

Bernard Borg
Bernard Borg

Reputation: 1372

I don't think that importing the scss into main.js is doing anything. Instead import it in the style tag of your App.vue.

Try the following in App.vue instead;

<template>
...
</template>

<style lang="scss">
@import("path to your scss/main.scss file")

#app {
    font-family: $body-font-family, sans-serif !important;
}
</style>

Upvotes: 1

Related Questions