Problems of preloading fonts and images using gatsby and netlify

Viewed 1464

I am keep getting the warning message of my website: https://www.selectchu.com

chrome warning message

"The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."

The resource https://www.selectchu.com/component---src-pages-index-js-e3609fd82d452154463c.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. The resource https://www.selectchu.com/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. The resource https://www.selectchu.com/app-97f530f3e5a7162dfd06.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. The resource https://www.selectchu.com/webpack-runtime-c108f36890d85c65bb96.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

what can be the main problem? and how to solve it?

I've tried to add as attribute on helmet plugin such as

const Font = 'public/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2'

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `SelectChu`,
    description: `Upcoming SelectChu project`,
    author: `@Hogyster`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: 'gatsby-plugin-netlify',
      options: {
        allPageHeaders: [`Link: <${Font}>; rel=preload; as=font; type=font/woff2 crossorigin=anonymous`],
      },

this is my gatsby-config.js

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-transition-link`,
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Noto Sans KR`,
            subsets: [`latin`, 'korean'],
            variants: [`400`, `700`]
          },
          {
            family: `Open Sans`,
            variants: [`400`, `700`]
          },
          {
            family: `Roboto`,
            variants: [`400`, `700`]
          },
        ],
      },
    },
    'gatsby-transformer-remark',
}
0 Answers
Related