Request credentials error in dev console (Firefox & Chrome) when loading Google Font using '@nuxt/fonts' (local dev mode)

I am loading three Google fonts from Google. I am using '@nuxt/fonts' module in Nuxt 3. In dev console for both Firefox and Chrome I get this error:

A preload for 'http://192.168.1.129:3000/_fonts/xMQOuFFYT72X5wkB_18qmnndmSdSnn-J-Vq1ibuGSdi.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

I have the current setup for Google fonts in my nuxt.config.ts:

  modules: [
    // For brevity I have removed other modules I use when posting this here on SO
    '@nuxt/fonts',
  ],
  fonts: {
    provider: 'google'
  },

  //@ts-ignore
  security: {
    headers: {
      crossOriginEmbedderPolicy: 'unsafe-none',
      crossOriginOpenerPolicy: 'unsafe-none',
      contentSecurityPolicy: {
        'font-src': ['https://google.com'], // <--- add the domain you want to fetch the image from here
      }
    },
  },

I have tried changing CORS policy but to no avail, error still there.

Now I also get:

GET http://192.168.1.129:3000/_fonts/wlptgwvFAVdoq2_F94zlCfv0bz1WCzsW_LM-Y7xrszA4ZH.woff
net::ERR_ABORTED 404 (Server Error)

Albeit all fonts are loading in dev mode when testing on local. I am loading fonts from Google with '@nuxt/fonts',

Thing is this started happening when I added a new page and routed that dynamically.

I disabled dev mode and things are now fine on localhost:3000.

The culprit was:

 devServer: {
    host: '0.0.0.0'
  },