如何在NuxtJS/Vuetify中修改默认字体？覆写$body-font-family无效

Nuxt 2 + Vuetify 2 场景 #

1. 配置Nuxt的Vuetify自定义变量路径
   在nuxt.config.js中修改Vuetify配置，指定自定义变量文件：

   export default {
     vuetify: {
       customVariables: ['~/assets/variables.scss'],
       treeShake: true
     }
   }
   

2. 创建全局变量文件并覆写字体
   在assets/variables.scss中，先引入Vuetify基础样式，再覆写$body-font-family：

   // 若使用本地字体，先定义字体
   @font-face {
     font-family: 'YourFont';
     src: url('~/assets/fonts/yourfont-regular.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
   }
   
   // 引入Vuetify基础样式
   @import '~vuetify/src/styles/styles.sass';
   
   // 覆写全局字体变量
   $body-font-family: 'YourFont', sans-serif;
   

Nuxt 3 + Vuetify 3 场景 #

1. 配置Vuetify样式文件路径
   在nuxt.config.ts中指定自定义变量文件：

   export default defineNuxtConfig({
     modules: ['@nuxtjs/vuetify'],
     vuetify: {
       styles: {
         configFile: 'assets/variables.scss'
       }
     }
   })
   

2. 编写全局变量文件
   在assets/variables.scss中引入Vuetify样式并覆写变量：

   // 本地字体定义（可选）
   @font-face {
     font-family: 'YourFont';
     src: url('~/assets/fonts/yourfont-regular.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
   }
   
   @import 'vuetify/styles';
   
   $body-font-family: 'YourFont', sans-serif;
   
   @include vuetify();
   

常见注意事项 #

• 若使用CDN字体（如Google Fonts），需先确保字体加载完成：
  Nuxt 2可在nuxt.config.js的head中添加链接：

  export default {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap'
        }
      ]
    }
  }
  

  Nuxt 3可在app.vue中通过useHead引入：

  <script setup>
  useHead({
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap'
      }
    ]
  })
  </script>
  

• 变量覆写必须在全局样式文件中进行，组件内局部修改不会影响Vuetify全局样式
• 字体文件路径要确保正确，使用~/指向项目根目录的assets文件夹

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