使用 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`)
       ],
     },
   },

将 tailwind 导入 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.

中的文件名

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

Self-Hosted Font with Gatsby & Tailwind (PostCSS)

postcss

gatsby

tailwind-css