update yarn.lock

assets/css/tailwind.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
-
 @import "tailwindcss/base";
 /* @import "./custom-base-styles.css"; */
 

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-white dark:bg-gray-900 font-roboto">
+    <div class="bg-white dark:bg-gray-900">
         <Nuxt />
         <footer-component />
 

nuxt.config.js

@@ -40,7 +40,8 @@ export default {
       },
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap' }
     ]
   },
 

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="font-roboto">
     <header-component>
         <div class="container px-4 py-8 mx-auto md:py-0">
             <div class="md:flex">