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

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

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

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;

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.

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

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>

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.

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.

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.