1

I'm importing a google font to a scoped component style tag. This typically works fine with VueJS. Attempting the same with NuxtJS seems as though the font is not loading.

Running Nuxt locally works, but once deployed quite a few things seem to not work as intended. My question in this instance is how do I properly import Google Fonts and use them within components?

<!-- @/components/MyComponent.vue -->

<template>
    <p class="custom-font">Some Text</p>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

.custom-font {
  font-family: 'Fredoka One', cursive !important;
}
</style>
kissu
  • 40,416
  • 14
  • 65
  • 133
Ari
  • 5,301
  • 8
  • 46
  • 120
  • 1
    I recommend to load all the fonts locally as shown in [my answer](https://stackoverflow.com/a/68166329/8816585). This way, you'll get better performance, more reliability and easier to track font imports. – kissu Apr 17 '22 at 06:41
  • @kissu thank you. Tested the nuxtjs google font module andI fixed the issue for the specific component font I wanted to alter. But, the module seems to overwrite the default font from Vuetify. Is there a way to just import a font and use it somewhere specific? – Ari Apr 17 '22 at 07:00
  • Fonts should set globally in your project, you can't really scope a font per component (not sure even why this may be useful). Loading it via the module is still the most efficient way. Vuetify having an issue is something else and should be fixed independently. What is the issue exactly? Seems strange that it conflicts anyhow. – kissu Apr 17 '22 at 07:08
  • @kissu When using Vuetify there seems to be a default font. I don't mind it, happy to use it. I have a specific heading I'm looking to use a Google Font on. When I install the Google Font NuxtJS module it seems to replace the default font with this very thin font, to the point it's hard to read. The component where I call in my custom font works however. – Ari Apr 17 '22 at 07:13
  • 1
    @kissu I think I solved it. I found a `variables.css` I respecified the body font to be `Arial` and now everything seems to be working as intended. The module imports my custom font and I can use it, and the body font is no longer overridden. Appreciate the help. – Ari Apr 17 '22 at 07:15

1 Answers1

1

Try to follow my answer here and set the default font of Vuetify to use this one.

Also, please use the related google-fonts-module module to have them done at build time globally rather than scoped locally per component (CDN is usually not reliant/performing poorly).

kissu
  • 40,416
  • 14
  • 65
  • 133