title: Problems of preloading fonts and images using gatsby and netlify
body: <p>I am keep getting the warning message of my website: <a href="https://www.selectchu.com" rel="nofollow noreferrer">https://www.selectchu.com</a></p>
  
  <p>chrome warning message</p>
  
  <p><strong>"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."</strong></p>
  
  <p>The resource <a href="https://www.selectchu.com/component---src-pages-index-js-e3609fd82d452154463c.js" rel="nofollow noreferrer">https://www.selectchu.com/component---src-pages-index-js-e3609fd82d452154463c.js</a> 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 <a href="https://www.selectchu.com/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2" rel="nofollow noreferrer">https://www.selectchu.com/google-fonts/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2</a> 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 <a href="https://www.selectchu.com/app-97f530f3e5a7162dfd06.js" rel="nofollow noreferrer">https://www.selectchu.com/app-97f530f3e5a7162dfd06.js</a> 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 <a href="https://www.selectchu.com/webpack-runtime-c108f36890d85c65bb96.js" rel="nofollow noreferrer">https://www.selectchu.com/webpack-runtime-c108f36890d85c65bb96.js</a> 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.</p>
  
  <p><strong>what can be the main problem? and how to solve it?</strong></p>
  
  <p>I've tried to add as attribute on helmet plugin such as</p>
  
  <pre><code>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: &lt;${Font}&gt;; rel=preload; as=font; type=font/woff2 crossorigin=anonymous`],
        },
  </code></pre>
  
  <p>this is my gatsby-config.js</p>
  
  <pre><code>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',
  }
  </code></pre>