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

Question

I've been trying for an hour to find a way to import a Google Font into a VueJS Component, but I cannot seem to find a solution, nothing worked yet, not even the stuff from previous StackOverflow questions. All the answers I've found are 1.5 to 2 years old now. I would appreciate it greatly if someone could suggest an up to date solution.

I am using VueJS2 + Webpack + Vue-cli

Answer 1

The fastest way is to import the font in a CSS file, for example App.css , if all components should have it:

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

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

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

The import statement is also shown by Google Fonts.

Select your fonts, click on Embed and then @import at the selection window:

Answer 2

Imo, if you're using VueJS, Google Fonts Webpack Plugin is the way.

Here's the plugin , it's really easy to set it up and works like a charm.

npm i google-fonts-webpack-plugin -D

Go to your /webpack.config.js / webpack.base.config.js and add the following lines:

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" ] }
            ]
        })
    ]
}

Now you can use Google Fonts anywhere inside your VueJS project :)

Answer 3

I would like to add to the answer given by msqar. If you are going to use Google Fonts Webpack Plugin: ( https://www.npmjs.com/package/google-fonts-webpack-plugin ) and you are using the Vue CLI, you can add a vue.config.js file inside the root of your project. See Vue CLI docs: ( https://cli.vuejs.org/guide/webpack.html#simple-configuration )

Then add the code to that file:

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

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

Answer 4

I didn't see a good example of using web fonts locally in Vue. So here is an example of what I used. I have some SASS variables and web fonts defined in a CSS file that gets globally added to my app so I don't have to individually import each file into my components. Note that the import for web fonts has a different syntax for the asset folder alias ~@/assets .

vue.config.js

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

In my CSS file global.scss I have:

@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 5

With Vue3 and CLI

For Vue 3 with CLI I am using the fork @beyonk/google-fonts-webpack-plugin to include the fonts locally. This might also work with Vue2 and the latest CLI Version. The original package does not work anymore.

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

In your vue.config.js add

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

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

Answer 6

Don't use the google-fonts-webpack-plugin package nor the google-fonts-plugin . They don't work with Vue.

Using @import doesn't solve the problem neither, if you want to do a PWA and use the fonts offline.

The solution I used was to use fontsource , they have all Google Fonts. Just install the font you want with yarn and then import it in your SASS.

Answer 7

In Vue2, just @import the font in section inside your vue component

<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

I am currently doing it like the following:

• Install the typeface of the font via npm (eg: npm install --save typeface-source-sans-pro )
• Import the typeface in the component ( import 'typeface-titillium-web'; )
• Use the font-face in the component ( font-family: 'Titillium Web', sans-serif; )

Keep in mind that with this the font gets self-hosted. So you don't have the support of the cached fonts on a cdn any more.

Answer 9

I wrote in my css file

@font-face {
    font-family: "Assistant";
    src: url("assistant/Assistant-VariableFont_wght.ttf") format("truetype");
}

I chose the format according to this: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Then I added to the class of the app element:

font-family: Assistant;

In the src part, you may use a link to the font if you don't have its files.

Answer 10

As this seems to be something of a perennial question, another solution is to go to the base index.html, and paste in the refs that are also available from Google fonts. That also can include pre-loads which do speed up matters. For example, on one site I have the following in the:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,500&display=swap" rel="stylesheet"> 

(yeah, I know, Fira Sans, bite me: :-) )

That doesn't answer the OP's question exactly, as they asked about per-component addition of fonts, but this does supply a font ref that is site-wide. Anyway, it's another possibility.