Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in '...\node_modules\gatsby-plugin-webfonts'

[sven5]

I'm getting this error trying to run gatsby develop

we're using the latest Gatsby packages:

"gatsby": "^4.10.0",
    "gatsby-background-image": "^1.6.0",
    "gatsby-cli": "^4.10.0",
    "gatsby-plugin-google-gtag": "^4.10.0",
    "gatsby-plugin-image": "^2.9.0",
    "gatsby-plugin-manifest": "^4.10.0",
    "gatsby-plugin-offline": "^5.10.0",
    "gatsby-plugin-postcss": "^5.10.0",
    "gatsby-plugin-react-helmet": "^5.10.0",
    "gatsby-plugin-sass": "^5.10.0",
    "gatsby-plugin-sharp": "^4.10.0",
    "gatsby-plugin-sitemap": "^5.10.0",
    "gatsby-plugin-testing": "^0.3.5",
    "gatsby-plugin-typography": "^4.10.0",
    "gatsby-plugin-webfonts": "^2.2.1",
    "gatsby-remark-copy-linked-files": "^5.10.0",
    "gatsby-remark-images": "^6.10.0",
    "gatsby-remark-prismjs": "^6.10.0",
    "gatsby-remark-responsive-iframe": "^5.10.0",
    "gatsby-remark-smartypants": "^5.10.0",
    "gatsby-source-filesystem": "^4.10.0",
    "gatsby-source-sanity": "^7.3.2",
    "gatsby-transformer-remark": "^5.10.0",
    "gatsby-transformer-sharp": "^4.10.0",
    "gatsby-transformer-yaml": "^4.10.0",

[sven5]

Ok, I think the cause is we're trying to use custom fonts.

options: {
        custom: {
          families: ['xxxx', 'xxx', 'Source Sans Pro']
        }
      }

[sensedrive]

We are facing the same issue with the following config

{
  {
    options: {
      fonts: {
        google2: [
          {
            family: "Montserrat",
            axes: "wght@400;700",
          },
        ],
      },
    },
    resolve: `gatsby-plugin-webfonts`,
  },
}

Did you find a solution @sven5 ?

[sven5]

@sensedrive We're no longer using gatsby-plugin-webfonts Instead, we switched to gatsby-omni-font-loader

[arafatamim]

My development also fails with the following error:

...
success copy gatsby files - 0.128s
success Compiling Gatsby Functions - 0.131s

 ERROR #11321  PLUGIN

"gatsby-plugin-webfonts" threw an error while running the onPreBootstrap lifecycle:

connect ETIMEDOUT 216.239.32.10:443

  Error: connect ETIMEDOUT 216.239.32.10:443

  - node:net:1187 TCPConnectWrap.afterConnect [as oncomplete]
    node:net:1187:16

success onPreBootstrap - 133.385s
success createSchemaCustomization - 0.636s

...

ERROR

Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in
'/home/shafi/rbds-website/node_modules/.pnpm/gatsby-plugin-webfonts@2.2.2_gatsby@4.14.0/node_modules/gatsby-plugin-webfonts'

  ModuleNotFoundError: Module not found: Error: Can't resolve '/.cache/webfonts/webfonts.css' in '/home/shafi/rbds-website/node_modules/.pnpm/gatsby-pl
  ugin-webfonts@2.2.2_gatsby@4.14.0/node_modules/gatsby-plugin-webfonts'

...

Configured like this:

    {
      resolve: "gatsby-plugin-webfonts",
      options: {
        fonts: {
          google: [
            {
              family: "Fira Sans",
              variants: ["300", "400", "500"],
              subsets: ["latin"],
              fontDisplay: "swap",
              strategy: "selfHosted" // 'base64' || 'cdn'
            },
            {
              family: "Roboto Slab",
              variants: ["500"],
              subsets: ["latin"],
              fontDisplay: "swap",
              strategy: "selfHosted" // 'base64' || 'cdn'
            }
          ]
        },
        formats: ["woff2", "woff"],
        useMinify: true,
        usePreload: true
        //usePreconnect: false,
      }
    }

[chandlervdw]

I'm having this issue, as well. I cannot pass null when using this plugin with gatsby-theme-material-ui.

[alexmacarthur]

Same issue here.

[jfgilmore]

Ok, I think the cause is we're trying to use custom fonts.

Yeah, I know this is a bit late but that's not the correct syntax for this plugin you should use seflHosted as per the documentation.

[MatkoMilic]

Ok, I think the cause is we're trying to use custom fonts.

Yeah, I know this is a bit late but that's not the correct syntax for this plugin you should use seflHosted as per the documentation.

Didnt fix it for me.