如何使用本地Google字体模块和Tailwind设置Nuxt？

Question

我似乎没有得到的衬线字体‘源serif Pro’在我的应用程序渲染。我还设置了‘Roboto’，这很好。我尝试了几种不同的方法，在顺风config...array...string...font堆栈的双引号上说，在尾风网站。

不知道我在这里错过了什么？

顺风配置

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    fontFamily: {
      roboto: ['Roboto', 'sans'],
      source: ['Source Serif Pro', 'serif'],
    },
    extend: {
      colors: {
        gray: {
          50: '#f4f4f4',
          100: '#000029',
          200: '#bebebe',
          300: '#555555',
          400: '#444444',
          500: '#3e3e3e',
        },
        tan: {
          400: '#d1b991',
          500: '#caae7f',
        },
        green: {
          400: '#008059',
          500: '#006846',
        },
      },
    },
  },
};

在“构建模块”中的nuxt配置

[
  '@nuxtjs/google-fonts',
  {
    families: {
      Roboto: {
        wght: [400, 700],
      },
      'Source+Serif+Pro': {
        wght: [400, 600],
      },
    },
    subsets: ['latin'],
    display: 'swap',
    prefetch: false,
    preconnect: false,
    preload: false,
    download: true,
    base64: false,
  },
],

Answer 1

你得做：

• 以下是将有一个可工作的Nuxt字体模块，与您所做的差不多。
• 需要将给定的字体引用到尾风中，因为您也实现了
• 不要忘记在本地引用字体就像这样

例如，对于Nunito

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
    url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}

Answer 2

Nuxt谷歌字体是有点有趣的工作。我试着工作，最后卸载了这个软件包。尝试使用@font-face在本地托管字体文件，并使用Nuxt css属性访问它们。

我通过加布里埃尔·艾格纳跟踪这个加布里埃尔·艾格纳让它为我工作。