Search code examples
javascriptvue.jsvuejs2fonts

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

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:

    Google Fonts