Question

我已经尝试了一个小时，试图找到一种将Google字体导入VueJS组件的方法，但是我似乎找不到解决方案，什么也没有用，甚至是以前StackOverflow问题中的内容也没有。我找到的所有答案现在都是1.5到2岁。如果有人可以提出最新的解决方案，我将不胜感激。

我正在使用VueJS2 + Webpack + Vue-cli

Answer 1

最快的方法是将字体导入CSS文件中，例如App.css（如果所有组件都应具有该字体）：

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto Condensed', sans-serif;
}

#app {
  font-family: 'Roboto Condensed', sans-serif;
}

Google字体也显示导入语句（在选择窗口中单击@IMPORT）

Answer 2

我没有看到在Vue中本地使用Web字体的一个很好的例子。因此，这是我使用的示例。我在CSS文件中定义了一些SASS变量和网络字体，该文件已全局添加到我的应用程序中，因此不必将每个文件单独导入到我的组件中。请注意，网络字体的导入对于资产文件夹别名〜@ / assets 具有不同的语法。

vue.config.js

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/css/global.scss";
        `
      }
    }
  }

在我的CSS文件global.scss中，我拥有：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenSans-Regular-400'), url(~@/assets/fonts/OpenSans-Regular-400.woff) format('woff');
}

/* color variables */

$corporate-blue: #005496;

Answer 3

Imo，如果您使用的是VueJS，则可以使用Google Fonts Webpack插件。

这里是plugin，设置起来非常容易，而且就像一个饰物。

npm i google-fonts-webpack-plugin -D

转到您的/webpack.config.js / webpack.base.config.js并添加以下几行：

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Roboto", variants: [ "400", "700italic" ] }
            ]
        })
    ]
}

现在，您可以在VueJS项目内的任何地方使用Google字体：）

Answer 4

不要使用 google-fonts-webpack-plugin 包或 google-fonts-plugin。它们不适用于 Vue。

如果您想执行 PWA 并离线使用字体，使用 @import 也不能解决问题。

我使用的解决方案是使用 fontsource，他们拥有所有 Google 字体。只需使用 yarn 安装您想要的字体，然后将其导入到您的 SASS 中即可。

Answer 5

我想补充一下msqar给出的答案。如果您要使用Google字体Webpack插件：（https://www.npmjs.com/package/google-fonts-webpack-plugin）并且您正在使用Vue CLI，则可以在项目的根目录内添加vue.config.js文件。请参阅Vue CLI文档：（https://cli.vuejs.org/guide/webpack.html#simple-configuration）

然后将代码添加到该文件：

 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");

 module.exports = {
    chainWebpack: config => {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" }
                ]
            })
        ]
     }
 }

Answer 6

使用 Vue3 和 CLI

对于带有 CLI 的 Vue 3，我使用 fork @beyonk/google-fonts-webpack-plugin 在本地包含字体。这可能也适用于 Vue2 和最新的 CLI 版本。原来的包已经不行了。

npm i -D @beyonk/google-fonts-webpack-plugin

在您的 vue.config.js 中添加

const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin")

// vue.config.js
module.exports = {
    configureWebpack: {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Poppins", variants: [ "500", "700" ] }
                ]
            })
        ]
    }
}

Answer 7

在Vue2中，只需@import vue组件内的部分中的字体

<style>
@import url('https://fonts.googleapis.com/css?family=Proza+Libre');
h1 {
    font-family: 'Proza Libre', sans-serif;
    color: seagreen;
    font-weight: 300;
}
</style>

Answer 8

我目前正在执行以下操作：

通过npm安装字体的字体（例如：npm install --save typeface-source-sans-pro）
将字体导入组件（import 'typeface-titillium-web';）
使用组件（font-family: 'Titillium Web', sans-serif;）中的字体

请记住，使用此字体可以自托管字体。因此，您不再拥有CDN上缓存的字体的支持。

如何将Google字体添加到VueJS组件？

8 个答案: