Самостоятельный шрифт с Gatsby и Tailwind (сообщение CSS)

Question

Я использовал собственный шрифт в Gatsby, и он работал хорошо. В основном у меня была -

• папка fonts/, в которую были помещены все файлы .woff2, с fonts.css, в котором были все вызовы @ font-face ( таким образом, потому что было почти 15 вызовов @ font-face)
• Я настроил плагин gatsby-source-filesystem в gatsby-config.js как показано ниже

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

Теперь я установил Попутный ветер с Post CSS, как показано ниже -

• установлен 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.config.js

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

Answer 1

Возможно, шрифты, которые у вас в ./src/fonts, не копируются в public? Вы можете проверить это, перейдя на вкладку «Сеть» в инструментах разработчика предпочтительного браузера, отфильтровав его по шрифту и увидев ответ. Скорее всего, это 404.

Быстрое решение - вручную скопировать шрифты в каталог static (создать его, если у вас его нет.)

Если у вас ' Если вы делаете что-то особенное со шрифтами (например, подшрифты), вам может быть интересно добавить ha sh в файл шрифтов и заменить имя файла в вашем font.css.