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

Question

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 pre

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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;

Answer 5

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>

Answer 6

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.