使用 Gatsby 和 Tailwind (PostCSS) 的自托管字体

Question

我在 Gatsby 中使用了自托管字体，效果很好。基本上我有 -

• 一个fonts/ 文件夹，其中放置了所有.woff2 文件，其中一个fonts.css 包含所有@font-face 调用（这样是因为几乎有15 个@font-face 调用）
• 我在gatsby-config.js 中配置了gatsby-source-filesystem 插件，如下所示

      resolve: "gatsby-source-filesystem",
      options: {
        name: "fonts",
        path: `${__dirname}/src/fonts/`
      }
    },

我现在已经安装了带有 PostCSS 的 Tailwind，如下所示 -

• 使用 yarn 安装了 tailwindcss 和 gatsby-plugin-postcss
• 配置gatsby-config.js如下-

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

• 将顺风导入gatsby-browser.js，如下所示

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

Tailwind 工作正常，但它没有使用我想使用的字体.....即使我在tailwind.config.js 中正确配置了它（我认为）

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

Answer 1

也许./src/fonts 中的字体没有复制到public？您可以通过导航到首选浏览器的开发人员工具中的“网络”选项卡进行检查，按字体过滤并查看响应。他们很可能是 404。

一种快速的解决方法是手动将字体复制到static 目录（如果没有，请创建一个。）

如果您对字体进行特殊处理（例如，子字体），您可能有兴趣在字体文件中添加哈希并替换 font.css 中的文件名。