Still getting flash of unstyled text when using gatsby google font plugins

user_12609508 0
Viewed 990

My main font in gatsby is defined in the index.scss folder like this in a body tag.

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

For the title I want to use the google font and I have tried to preload using these plugins:

 {
      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"],
        },
      },
    },

In the css font is defined but still getting the flash of unstyled text in production not locally in development.

.title {
  font-family: "Sacramento", cursive;
}
google-font-api gatsby-plugin gatsby
1 Answers

Your .title class is correct.

However, since you are displaying the font as swap (font-display: swap) it first loads the font with default typography until it is rendered and overridden by your CSS. This avoids the CSS rendering to block your web loading, improving your web performance but if you really want to avoid the flicker just add display: block in the options object:

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