diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 6df8f05..f0dd4b3 100644
--- a/assets/css/tailwind.css
+++ b/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"; */
 
diff --git a/layouts/default.vue b/layouts/default.vue
index f74441d..a8d8dfd 100644
--- a/layouts/default.vue
+++ b/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 />
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 992c9cb..221a7c4 100644
--- a/nuxt.config.js
+++ b/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' }
     ]
   },
 
diff --git a/pages/index.vue b/pages/index.vue
index c10c9cb..b375528 100644
--- a/pages/index.vue
+++ b/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">