如何在Nuxt.js中设置Quicksand字体为全局默认字体？

问题 #

我当前的Nuxt配置如下：

buildModules: ["@nuxtjs/google-fonts"],
css: [
  "vuetify/lib/styles/main.sass",
  "@mdi/font/css/materialdesignicons.min.css",
],
googleFonts: {
  families: {
    Quicksand: true,
  },
},

给组件加个类就能用上Quicksand字体：

.test-font {
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  font-size: 5em;
}

但我想把它设成全局默认字体，不用每次写类，该怎么弄？

解决方案 #

方法1：修改Vuetify配置（推荐，适配所有Vuetify组件） #

既然项目用了Vuetify，直接在Nuxt配置里添加Vuetify的字体设置即可，所有Vuetify组件都会自动继承这个字体：
在nuxt.config.js里新增/修改vuetify配置块：

export default {
  // 原有配置...
  buildModules: ["@nuxtjs/google-fonts"],
  css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css",
  ],
  googleFonts: {
    families: {
      Quicksand: true,
    },
  },
  // 新增Vuetify字体配置
  vuetify: {
    theme: {
      // 保留原有的主题配置
    },
    font: {
      family: 'Quicksand'
    }
  }
}

配置完成后，不管是Vuetify自带的按钮、卡片组件，还是你自定义的元素，默认字体都会变成Quicksand。

方法2：全局CSS强制覆盖 #

不想改动Vuetify配置的话，可以通过全局CSS文件覆盖所有元素的字体：

1. 在项目assets目录下新建global.css文件，内容如下：

* {
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

2. 将这个文件加入nuxt.config.js的css数组中：

css: [
  "vuetify/lib/styles/main.sass",
  "@mdi/font/css/materialdesignicons.min.css",
  "~/assets/global.css" // 添加这一行
],

!important是为了确保覆盖Vuetify自带的字体样式，若不需要强制覆盖可以去掉，但可能部分组件的字体无法被替换。

方法3：用Vuetify变量文件精细控制 #

如果需要分别设置正文和标题的字体，使用Vuetify的变量文件会更灵活：

1. 在assets目录下新建variables.scss文件：

$body-font-family: 'Quicksand', sans-serif;
$heading-font-family: 'Quicksand', sans-serif; // 标题也用Quicksand，也可替换为其他字体

2. 在nuxt.config.js的Vuetify配置中引用这个变量文件：

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  // 保留原有的其他配置
}

这种方式完全适配Vuetify的样式系统，不会出现样式冲突问题。

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