Google 字体导入不适用于 NuxtJS 组件样式

Question

我正在将 google 字体导入范围组件样式标签。这通常适用于 VueJS。尝试对 NuxtJS 进行同样的操作似乎字体未加载。

运行 Nuxt 在本地可用，但一旦部署，很多东西似乎无法按预期工作。在这种情况下，我的问题是如何正确导入 Google 字体并在组件中使用它们？

<!-- @/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>

Answer 1

尝试按照我的将 Vuetify 的默认字体设置为使用此字体。

此外，请使用相关的 google-fonts-module 模块在构建时全局完成它们，而不是在每个组件的本地范围内完成（CDN 通常 reliant/performing 很差）。

Google 字体导入不适用于 NuxtJS 组件样式

Google font import not working with NuxtJS component style

vue.js

nuxt.js

google-fonts