Google font import not working with NuxtJS component style-CodePudding

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

CodePudding user response：

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