diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue
index 9d97faf8d8..dd28c0a296 100644
--- a/packages/docs/layouts/default.vue
+++ b/packages/docs/layouts/default.vue
@@ -60,9 +60,9 @@ onMounted(() => {
 
 useHead({
   link: [
-    { href: 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css', rel: 'stylesheet' },
-    { href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', rel: 'stylesheet' },
-    { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
+    { href: 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css', rel: 'preload', as: "style" },
+    { href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', rel: 'preload', prefetch: "style" },
+    { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "preload", prefetch: "style" },
   ],
   script: [
     { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
diff --git a/packages/docs/layouts/landing.vue b/packages/docs/layouts/landing.vue
index cea00ab809..f8b31f339e 100644
--- a/packages/docs/layouts/landing.vue
+++ b/packages/docs/layouts/landing.vue
@@ -10,7 +10,11 @@
 useHead({
   title: 'Vuestic UI — Vue 3 UI framework',
   link: [
-    { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" },
+    { 
+      rel: "preload",
+      href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css",
+      as: "style"
+    },
   ]
 })
 </script>
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index 5fac7faa7f..aef7c96e96 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -88,7 +88,9 @@ export default defineNuxtConfig({
 
   googleFonts: {
     preload: true,
-    swap: true,
+    prefetch: true,
+    preconnect: true,
+    display: 'swap',
     families: {
       'Source+Sans+Pro': {
         wght: [400, 600, 700],
diff --git a/packages/docs/pages/index.vue b/packages/docs/pages/index.vue
index d9ae5a521e..25af31a1e2 100644
--- a/packages/docs/pages/index.vue
+++ b/packages/docs/pages/index.vue
@@ -27,7 +27,7 @@ const isMobileMenuOpen = ref(false)
 @import "@/assets/variables.scss";
 
 .landing {
-  font-family: Source Sans Pro;
+  font-family: var(--va-font-family);
 
   a {
     @include link(2px);