lazy load fonts

ppy-sb · Jun 21, 2024 · 2adace5 · 2adace5
1 parent 75c31e2
commit 2adace5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -21,6 +21,7 @@
     "Favourite",
     "favourites",
     "fetchable",
+    "fetchpriority",
     "fontawesome",
     "fortawesome",
     "fullscreen",

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -73,6 +73,25 @@ export default defineNuxtConfig({
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
       ],
       link: [
+
+        // google fonts
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+        {
+          rel: 'preload',
+          as: 'style',
+          fetchpriority: 'high',
+          href: 'https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
+        },
+        {
+          rel: 'stylesheet',
+          href:
+          'https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
+          media: 'print',
+          onload: 'this.media = "all"',
+        },
+        // end google fonts
+
         { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
         { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
         { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },

diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -1,5 +1,4 @@
 /* @import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap"); */
-@import url("https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 /* @import url("https://192960944.r.cdn36.com/chinesefonts2/packages/lxgwwenkai/dist/LXGWWenKai-Bold/result.css"); */
 
 html {

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -98,16 +98,5 @@ de-DE:
 }
 .heading {
   @apply relative flex items-center justify-between px-4 lg:px-0 mx-auto my-auto text-left text-gbase-900 dark:text-gbase-100;
-  /* &::before,
-  &::after {
-    content: "";
-    @apply -z-10 opacity-50;
-    @apply lg:absolute lg:top-[30%] lg:bottom-[30%] lg:left-0 lg:right-0;
-    @apply lg:bg-gradient-to-r lg:from-gbase-500/5 lg:to-transparent;
-    @apply lg:rounded-3xl;
-  }
-  &::before {
-    @apply lg:blur
-  } */
 }
 </style>