Make google font not render blocking

Author: mugetsu

nuxt.config.js

@@ -29,7 +29,6 @@ module.exports = {
       { hid: 'og:url', property: 'og:url', content: 'https://covid-worldwide.herokuapp.com' }
     ],
     link: [
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap' },
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },

pages/index.vue

@@ -30,6 +30,11 @@ const Overview = () => import('~/components/Overview')
 const Map = () => import('~/components/Map')
 
 export default {
+  head: {
+    script: [
+      { src: 'font.js', body: true }
+    ]
+  },
   components: {
     LazyHydrate,
     Latest,

static/font.js

@@ -0,0 +1,11 @@
+WebFontConfig = {
+	google: { families: [ 'Roboto:300,400,700' ] }
+}
+;(function(){
+	var wf = document.createElement('script')
+	wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
+	wf.type = 'text/javascript'
+	wf.async = 'true'
+	var s = document.getElementsByTagName('script')[0]
+	s.parentNode.insertBefore(wf, s)
+})()