Gatsby 与盖茨比&；顺风（邮政编码）

我在《盖茨比》中使用了自托管字体，效果很好。基本上我有-

• 一个

  fonts/

  文件夹，其中放置了所有

  .woff2

  文件，以及一个

  fonts.css

  ，其中包含所有@font-face调用（这种方式是因为几乎有15个@font-face调用）
• 我在

  gatsby config.js

  中配置了

  gatsby源文件系统

  插件，如下所示

我现在已经安装了带有POSTSS的尾灯，如下所示-

• 使用纱线安装了

  tailwindcss

  和

  gatsby插件postsss

• 配置的

  gatsby config.js

  如下-

• 将尾风导入到

  gatsby browser.js

  中，如下所示

Tailwind工作正常，但它没有使用我想要使用的字体……尽管我在

Tailwind.config.js

extend: {
      fontFamily: {
        sans: ["Custom Font Family Name", ...defaultTheme.fontFamily.sans],
      },

---

您在

/src/font

中使用的字体可能没有复制到

public

？您可以通过导航到首选浏览器的“开发人员工具”中的“网络”选项卡进行检查，按字体筛选并查看响应。很可能是404

快速修复方法是手动将字体复制到

static

目录中（如果没有，请创建一个）

---

如果您正在对字体（例如，子字体）执行一些特殊操作，您可能有兴趣将哈希添加到字体文件中，并替换

font.css

中的文件名，谢谢！这有助于找到主要问题。原来

gatsby config.js

中插件条目的顺序非常重要。通过将

gatsby插件postsss

安排在

gatsby源文件系统

字体条目上方，它起到了作用。然而，为什么它会以这种方式工作仍然是个谜。。。。

{
     resolve: `gatsby-plugin-postcss`,
     options: {
       postCssPlugins: [
         require(`tailwindcss`),
         require(`autoprefixer`)
       ],
     },
   },

import "tailwindcss/base.css"
import "tailwindcss/components.css"
import "tailwindcss/utilities.css"

extend: {
      fontFamily: {
        sans: ["Custom Font Family Name", ...defaultTheme.fontFamily.sans],
      },