Google fonts sometimes fail to load - caching of opaque errors

**Library Affected**: workbox-strategies, workbox-recipes

**Browser & Platform**: Google Chrome 123.0.6312.58 for Mac

**Issue Description**:

I've noticed that Google fonts sometimes fail to load for my web app.

We're using a standard `` tag to request the fonts stylesheet:

```html

```

and our own local version of the [Google Fonts recipe](https://github.com/GoogleChrome/workbox/blob/v7.0.0/packages/workbox-recipes/src/googleFontsCache.ts#L32), based off the old https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts page:

```ts
registerRoute(
({ url }) => url.origin === 'https://fonts.googleapis.com',
new StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
})
);

registerRoute(
({ url }) => url.origin === 'https://fonts.gstatic.com',
new CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200],
}),
new ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
})
);
```

The cause, as best as I can tell, is that Chrome will randomly fail to load the googleapis.com link when the page is first loaded. (It seems to work fine whenever an already open page is reloaded.) I've been unable to find any details as to why. Sample console error messages:

> The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
> The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
> The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
> GET https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap net::ERR_FAILED

When this happens, Workbox may cache an opaque response, causing the _next_ page load or reload to not have valid fonts. (I believe that had previously happened in the sample console messages - the previous response had failed, resulting in the FetchEvent messages, then the current response failed too.)

If I modify the recipe to _not_ cache opaque responses, I no longer have these issues:

```ts
registerRoute(
({ url }) => url.origin === 'https://fonts.googleapis.com',
new StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
plugins: [
new CacheableResponsePlugin({
statuses: [200],
}),
],
})
);

registerRoute(
({ url }) => url.origin === 'https://fonts.gstatic.com',
new CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new CacheableResponsePlugin({
statuses: [200],
}),
new ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
})
);
```

Based on this, I believe that the recipe's guidance to allow caching of opaque Google fonts responses is out of date.