docs: fix fonts loading

epicmaxco · Jun 12, 2023 · c62067a · c62067a
1 parent b1ec5c5
commit c62067a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git 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/[email protected]/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/[email protected]/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
@@ -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
@@ -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
@@ -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);