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

Answer 1

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: