Gatsby build fails google-fonts

I seem to be running into the following error,

>$ gatsby build                                          
success open and validate gatsby-configs - 0.065s
success load plugins - 1.222s
success onPreInit - 0.019s
success delete html and css files from previous builds - 0.002s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.029s
success copy gatsby files - 0.039s

 ERROR #11321  PLUGIN

"gatsby-plugin-prefetch-google-fonts" threw an error while running the onPreBootstrap lifecycle:

ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'



Error: ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'

not finished onPreBootstrap - 7.272s

My gatsby-config.js looks like this,

{
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Poppins`,
            variants: [`300`, `400`, `500`, `600`, `700`],
          },
          {
            family: `Fira Sans`,
            variants: [`100`, `300`, `400`, `500`, `600`, `700`],
          },
        ],
      },
    },

package.json

"dependencies": {
    "@styled-system/theme-get": "^5.1.2",
    "axios": "^0.21.1",
    "babel-plugin-styled-components": "^1.12.0",
    "disqus-react": "^1.0.10",
    "formik": "^2.1.5",
    "gatsby": "^2.24.57",
    "gatsby-image": "^2.4.17",
    "gatsby-plugin-feed": "^2.5.11",
    "gatsby-plugin-google-analytics": "^2.3.13",
    "gatsby-plugin-lodash": "^3.3.10",
    "gatsby-plugin-mailchimp": "^5.2.2",
    "gatsby-plugin-manifest": "^2.4.28",
    "gatsby-plugin-offline": "^3.2.27",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
},

I've tried the following but doesn't seem to work - Gatsby - Adding Google fonts to Gatsby site

Solution

According to some GitHub threads (https://github.com/gatsbyjs/gatsby/issues/27607) it seems to be an unresolved bug (that affects versions greater than ^2.25.1) and they suggest using alternative packages, such as:

After the proper configuration, the issue should be gone.

Keep in mind that if you are using Gatsvy v3, some packages may be deprecated until they are being upgraded to the new version of Gatsby.

I personally use gatsby-plugin-google-fonts-v2 and works perfectly. You can follow the stack of the fonts in the generated <link> to check the loaded fonts from Google, in this case:

{
  resolve: `gatsby-plugin-google-fonts-v2`,
  options: {
    fonts: [
      {
        family: `Poppins:wght@300;400;500;600;700`,
      },
      {
        family: `Fira Sans:wght@100;300;400;500;600;700`,
      }
    ]
  }
},