如何在Nuxt 3 + Vuetify 3项目中修改默认字体？

下面提供几种可行的方案，你可以根据项目需求选择：

方案1：通过Vuetify主题配置直接指定字体 #

修改你的plugins/vuetify.ts文件，在自定义主题中添加font属性指定字体家族：

import { createVuetify, ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import "@mdi/font/css/materialdesignicons.css";

const myTheme: ThemeDefinition = {
    dark: false,
    colors: {
        primary: "#HEXHEX",
    },
    variables: {},
    // 添加字体配置
    font: {
        family: "'YourCustomFont', sans-serif" // 替换为你的目标字体名称
    }
};

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        components,
        directives,
        theme: {
            defaultTheme: "myTheme",
            themes: {
                myTheme
            }
        }
    });

    nuxtApp.vueApp.use(vuetify);
});

方案2：通过全局CSS变量覆盖默认字体 #

1. 在assets/css目录下创建global.css文件，添加以下内容：

:root {
  --v-font-family: 'YourCustomFont', sans-serif;
}

2. 在nuxt.config.ts中引入这个全局样式文件：

export default defineNuxtConfig({
  css: ['~/assets/css/global.css']
})

方案3：使用SCSS变量覆盖Vuetify默认字体 #

1. 在assets目录下创建variables.scss，定义Vuetify字体变量：

$font-family: 'YourCustomFont', sans-serif;

2. 在plugins/vuetify.ts最顶部导入这个SCSS文件：

import "~/assets/variables.scss";

补充：引入自定义字体（本地/远程） #

如果使用本地字体文件：

1. 将字体文件（如.woff2/.ttf）放在assets/fonts目录下
2. 创建assets/css/fonts.css，定义字体加载规则：

@font-face {
  font-family: 'YourCustomFont';
  src: url('~/assets/fonts/your-font-regular.woff2') format('woff2'),
       url('~/assets/fonts/your-font-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 若有粗体/斜体版本，补充对应规则 */
@font-face {
  font-family: 'YourCustomFont';
  src: url('~/assets/fonts/your-font-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

3. 在nuxt.config.ts中引入这个字体样式文件：

export default defineNuxtConfig({
  css: ['~/assets/css/fonts.css']
})

如果使用谷歌字体，直接在nuxt.config.ts的app.head中引入：

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

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