'How do I add a Google Font to a VueJS Component?

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

Solution 1:^[1]

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 :)

Solution 2:^[2]

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

Solution 3:^[3]

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;

Solution 4:^[4]

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

Solution 5:^[5]

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.

Solution 6:^[6]

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>

Solution 7:^[7]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Duncan Jones
Solution 2
Solution 3	mbokil
Solution 4	basti500
Solution 5	Maurici Abad
Solution 6	Elisabeth Shevtsova
Solution 7	schnetzi

'How do I add a Google Font to a VueJS Component?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]