将Google字体家族添​​加到Nuxt＆Vuetify项目

Question

我正在尝试使用Nuxt，Firebase和Vuetify构建应用程序。我是新手开发人员，将不胜感激在以下问题上的帮助。

我无法添加Google字体（最近尝试过Bellefair）或将全局默认字体大小更改为带有Vuetify项目的Nuxt。我的nuxt.config.js在下面。我也不能更改默认字体大小。我尝试了各种代码片段，但到目前为止似乎都没有用。我终于到达了下面，但仍然没有成功。

---

import colors from "vuetify/es5/util/colors";

export default {
  mode: "spa",

  head: {
    titleTemplate: "%s - " + process.env.npm_package_name,
    title: process.env.npm_package_name || "",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ""
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, {
      rel: "stylesheet", href:"https://fonts.googleapis.com/css?family=Bangers|Bellefair"
    }]
  },

  loading: "@/components/loading",

  css: [],

  plugins: ["@/plugins/fireauth.js"],

  buildModules: ["@nuxtjs/vuetify"],

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
    "@nuxtjs/date-fns"
  ],
  router: {
    middleware: "fb-auth"
  },

  axios: {},

  vuetify: {
    customVariables: ["~assets/styles/variables.scss"],
    theme: {
      light: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
};

---

我的~assets/styles/variables.scss文件是：

---

$body-font-family: "Bellefair", sans-serif;
$font-size-root: 20px;

@font-face {
  font-family: "Bellefair";
  src: url("https://fonts.googleapis.com/css?family=Bellefair");
}

body {
    font-family: "Bellefair", sans-serif;
}

编辑： // \ // \ // \ // \ // \ // \ 我找到了自己的问题的解决方案：

我在我的nuxt.config.js和该文件中添加了= CSS：['〜/ assets / styles / my-custom-styles.css']

div {
   font-family: "Montserrat", sans-serif;
   font-size: 18px;
}

此外，我意识到我的nuxt.config.js标头不需要链接到googleapis.com的样式表。

很抱歉在这里占用空间，但随时欢迎看到更好的答复...

Answer 1

1。。添加您的Google字体，例如，将链接嵌入nuxt.config.js中，以添加DM Sans字体。

head: {
  titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
      ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
          {
            rel: 'stylesheet', href: '<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet"> '
          }
        ] },

2。在nuxt.config.js的vuetify部分启用树状握手。

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

3。。添加规则资产/variable.scss：

$body-font-family : 'DM Sans', sans-serif;