diff --git a/lib/module.js b/lib/module.js
index 19959ec..2e6354a 100644
--- a/lib/module.js
+++ b/lib/module.js
@@ -84,6 +84,7 @@ module.exports = function (moduleOptions) {
     }
 
     // https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices
+    // connect to domain of font files
     if (options.preconnect) {
       this.options.head.link.push({
         rel: 'preconnect',
@@ -92,10 +93,23 @@ module.exports = function (moduleOptions) {
       })
     }
 
+    // async CSS
     this.options.head.link.push({
+      vmid: 'google-fonts',
       rel: 'stylesheet',
-      href: url
+      href: url,
+      media: 'print',
+      onload: 'this.onload=null;this.removeAttribute(\'media\');'
     })
+
+    // no-JS fallback
+    this.options.head.noscript = this.options.head.noscript || []
+    this.options.head.noscript.push({
+      innerHTML: `<link rel="stylesheet" href="${url}">`
+    })
+
+    this.options.head.__dangerouslyDisableSanitizers = this.options.head.__dangerouslyDisableSanitizers || []
+    this.options.head.__dangerouslyDisableSanitizers.push('noscript')
   })
 }
 
diff --git a/test/basic.test.js b/test/basic.test.js
index b52a527..f0d6840 100644
--- a/test/basic.test.js
+++ b/test/basic.test.js
@@ -15,6 +15,7 @@ describe('basic', () => {
     const html = await get('/')
     expect(html).toContain('<link data-n-head="ssr" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
     expect(html).toContain('<link data-n-head="ssr" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
-    expect(html).toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
+    expect(html).toContain('<link data-n-head="ssr" vmid="google-fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato" media="print" onload="this.onload=null;this.removeAttribute')
+    expect(html).toContain('<noscript data-n-head="ssr"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Lato"></noscript>')
   })
 })
diff --git a/test/download.test.js b/test/download.test.js
index 4942670..e3a929f 100644
--- a/test/download.test.js
+++ b/test/download.test.js
@@ -18,7 +18,8 @@ describe('download', () => {
     const html = await get('/')
     expect(html).not.toContain('<link data-n-head="ssr" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
     expect(html).not.toContain('<link data-n-head="ssr" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="true">')
-    expect(html).not.toContain('<link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">')
+    expect(html).not.toContain('<link data-n-head="ssr" vmid="google-fonts" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" media="print" onload="this.onload=null;this.removeAttribute')
+    expect(html).not.toContain('<noscript data-n-head="ssr"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto"></noscript>')
   })
 
   test('css inject', () => {