[FIXED] How do I add a Google Font to a VueJS Component?

Issue

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

Solution

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:

Answered By - Bennett Dams

Answer Checked By - Timothy Miller (PHPFixing Admin)