Vue 3 + Vuetify 3无法将字体从Roboto改为Lato求助

你的问题在于没有正确覆盖Vuetify 3的内置SCSS变量，且变量名、导入顺序存在问题，按以下步骤调整即可：

1. 安装Sass依赖（未安装的话执行）
   Vuetify 3依赖Sass处理SCSS变量，运行命令：

npm install sass --save-dev

2. 修改/scss/main.scss内容
   替换原代码为：

// 导入Lato字体
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

// 覆盖Vuetify全局字体变量（Vuetify默认使用$font-family而非自定义的$body-font-family）
$font-family: 'Lato', sans-serif;

// 导入Vuetify核心样式，确保变量在样式前定义才能生效
@import 'vuetify/styles';

3. 调整main.js的导入顺序
   确保自定义SCSS在Vuetify初始化前导入，示例代码：

import { createApp } from 'vue'
import App from './App.vue'
// 先导入自定义SCSS
import './scss/main.scss'
// 再初始化Vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

4. 移除App.vue中的无效样式
   你之前在#app中添加的样式无法生效（SCSS变量$body-font-family在App.vue的样式作用域内未定义），直接删除这段代码即可。

完成以上操作后，Vuetify的所有组件及全局文本都会默认使用Lato字体。

内容的提问来源于stack exchange，提问作者Nanna