How to add a Google Font to a Vue.js Component?

Sometimes, we want to add a Google Font to a Vue.js Component.

In this article, we’ll look at how to add a Google Font to a Vue.js Component.

How to add a Google Font to a Vue.js Component?

To add a Google Font to a Vue.js Component, we use the @import directive.

For instance, we write

<style>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

html,
body {
  font-family: "Roboto", sans-serif;
}

#app {
  font-family: "Roboto", sans-serif;
}
</style>

to import the Roboto Google font with @import.

Then we can set font-family to that to use it.

Conclusion

To add a Google Font to a Vue.js Component, we use the @import directive.