Ufdjrw

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

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 Condensed', sans-serif;


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

The import statement is also shown by Google Fonts (click on @IMPORT in 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" 
 ]
 )
 ]
 
 

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>