website using nuxt and @nuxtjs/pwa not caching google fonts

I created my app with npx create-nuxt-app, then added npm install @nuxtjs/pwa --save. I'm including a google font in index.html with:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" data-n-head="true">

I tested my app in offline mode in Chrome by clicking the "Offline" checkbox in the devtools/application tab, and reloading. Everything is cached except for the font.

I then added:

workbox: {
    runtimeCaching: [
        {
            urlPattern: 'https://fonts.googleapis.com/.*',
            handler: 'cacheFirst',
            method: 'GET'
        },
    ]
}

to the nuxt.config.js file but I can't get the font to be cached. I've tried a number of variations on the urlPattern.

Nuxt is generating a service worker for me, and it looks like this:

importScripts('/_nuxt/workbox.3de3418b.js')

const workboxSW = new self.WorkboxSW({
  "cacheId": "my-app",
  "clientsClaim": true,
  "directoryIndex": "/"
})

workboxSW.precache([
  {
    "url": "/_nuxt/app.bb74329360a7ee70c2af.js",
    "revision": "8477c51cbf9d3188f34f1d61ec1ae6bc"
  },
  {
    "url": "/_nuxt/layouts/default.ce9446c7c3fffa50cfd2.js",
    "revision": "504d33b2d46614e60d919e01ec59bbc8"
  },
  {
    "url": "/_nuxt/manifest.912c22076a54259e047d.js",
    "revision": "a51a74b56987961c8d34afdcf4efa85c"
  },
  {
    "url": "/_nuxt/pages/index.6bfd6741c6dfd79fd94d.js",
    "revision": "1a80379a5d35d5d4084d4c2b85e1ee10"
  },
  {
    "url": "/_nuxt/vendor.f681eb653617896fcd64.js",
    "revision": "59c58901fd5142fdaac57cbee8c1aeb4"
  }
])


workboxSW.router.registerRoute(new RegExp('/_nuxt/.*'), workboxSW.strategies.cacheFirst({}), 'GET')

workboxSW.router.registerRoute(new RegExp('/.*'), workboxSW.strategies.networkFirst({}), 'GET')

workboxSW.router.registerRoute(new RegExp('https://fonts.googleapis.com/.*'), workboxSW.strategies.cacheFirst({}), 'GET')

Why is the font not getting cached?

EDIT #1: Thanks to Jeff Posnick, I understand what's happening. I haven't figured out the right syntax to pass in the nuxt.config.js file, but as an experiment, I hacked the sw.js file directly and added these two lines:

workboxSW.router.registerRoute(new RegExp('https://fonts.googleapis.com/.*'),
    workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}}), 
    'GET')

workboxSW.router.registerRoute(new RegExp('https://fonts.gstatic.com/.*'),
    workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}}),
    'GET')

That worked!

For version 2 of workbox and version 2 of @nuxt/pwa, this is the syntax that is needed in the nuxt.config.js file:

workbox: {
    runtimeCaching: [
        {
            urlPattern: 'https://fonts.googleapis.com/.*',
            handler: 'cacheFirst',
            method: 'GET',
            strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
        },
        {
            urlPattern: 'https://fonts.gstatic.com/.*',
            handler: 'cacheFirst',
            method: 'GET',
            strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
        },
    ]
}