如何将Vuetify 3默认字体改为Poppins？两种尝试均失败

步骤1：引入Poppins字体 #

有两种常用引入方式：

• CDN引入：在项目根目录的index.html的<head>标签中添加Google Fonts链接：

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
  

• 本地导入：下载Poppins字体文件，放到项目assets/fonts目录下，在SCSS文件中添加字体声明：

  @font-face {
    font-family: 'Poppins';
    src: url('@/assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  // 按需添加其他字重（如300、500、700）的字体声明
  

步骤2：覆盖Vuetify的SCSS变量 #

这是解决问题的核心——Vuetify的默认字体由SCSS变量控制，直接修改.v-application容易被内置样式覆盖。

1. 在项目根目录创建styles/vuetify-overrides.scss文件，写入以下内容：

   // 导入Vuetify基础样式并覆盖字体变量
   @use 'vuetify/styles' with (
     $font-family: 'Poppins', sans-serif;
   );
   

2. 修改main.js（或main.ts）中的Vuetify初始化代码，替换默认样式导入为自定义SCSS文件：

   import { createApp } from 'vue'
   import App from './App.vue'
   import { createVuetify } from 'vuetify'
   // 导入自定义样式文件，而非默认的vuetify/styles
   import './styles/vuetify-overrides.scss'
   
   const vuetify = createVuetify({
     // 其他Vuetify配置项
   })
   
   createApp(App).use(vuetify).mount('#app')
   

步骤3：验证生效 #

删除之前在App.vue或其他文件中写的.v-application字体样式（避免冲突），启动项目后检查页面元素的font-family属性，确认已替换为Poppins。

之前方法失效的原因 #

• 直接修改.v-application的font-family，样式权重低于Vuetify内置的更具体选择器。
• 单独导入SCSS文件但未覆盖Vuetify核心变量，内置Roboto字体样式依然会生成。

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