将 Google 字体系列添加到 Nuxt&Vuetify 项目

Posted 2023-03-06

【中文标题】将 Google 字体系列添加到 Nuxt&Vuetify 项目

【英文标题】：Adding Google Font Family to Nuxt&Vuetify Project

【发布时间】：2020-02-18 11:07:17

【问题描述】：

我正在尝试使用 Nuxt、Firebase 和 Vuetify 构建应用程序。我是一名新手开发人员，希望能在以下问题上提供帮助。

我无法使用 Vuetify 项目添加 Google 字体（最后尝试了 Bellefair）或将全局默认字体大小更改为我的 Nuxt。我的nuxt.config.js 在下面。我也无法更改默认字体大小。我尝试了各种我发现的 sn-ps，但到目前为止似乎都没有。我终于到达了下面，但仍然没有成功。

---

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;

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

我将 = css: ['~/assets/styles/my-custom-styles.css'] 添加到我的 nuxt.config.js 和该文件中

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

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

很抱歉在这里占用空间，但我总是欢迎看到更好的回应......

【问题讨论】：

在这里回答***.com/questions/51436344/…

【参考方案1】：

1.添加您的谷歌字体，在 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 部分启用 treeshaking。

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

3. 添加规则 assets/variable.scss：

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