При использовании плагинов шрифтов gatsby google по-прежнему отображается нестилизованный текст

Question

Мой основной шрифт в gatsby определен в папке index.scss, как это в теге body.

body {
  font-family: "Trebuchet MS", "Helvetica";
  font-size: 16px;
}

Для заголовка я хочу использовать шрифт Google, и я попытался предварительно загрузить эти плагины:

 {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Sacramento`],
        display: "swap",
      },
    },
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Sacramento`,
            variants: [`400`],
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["Sacramento"],
        },
      },
    },

В CSS шрифт определен, но все еще отображается нестилизованный текст в производстве, а не локально в разработке.

.title {
  font-family: "Sacramento", cursive;
}

Answer 1

Ваш .title класс правильный.

Однако, поскольку вы отображаете шрифт как swap (font-display: swap) он сначала загружает шрифт с типографикой по умолчанию, пока он не будет отображен и не заменен вашим CSS. Это позволяет избежать рендеринга CSS, чтобы заблокировать веб-загрузку, улучшая производительность веб-сайта, но если вы действительно хотите избежать мерцания, просто добавьтеdisplay: block в объекте опций:

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Sacramento`
    ],
    display: 'block'
  }
}