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

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:

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