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

问题描述

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

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

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

我现在已经使用 PostCSS 安装了 Tailwind，如下所示 -

安装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],
      },

标签： gatsbypostcsstailwind-css

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

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

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

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

问题描述

解决方案

推荐阅读