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

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:

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