diff --git a/assets/css/main.css b/assets/css/main.css
index 126e299..463362e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -58,20 +58,20 @@
     --color-mc-container-top: 90, 91, 92;
     --color-mc-container-bottom: 50, 51, 52;
 
-    --font-sans: TikTokSans, NotoSansThai, sans-serif;
-    --font-mono: RobotoMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --font-display--font-variation-settings: "wdth" 75; 
+    --font-sans: NotoSansVariable, NotoSansThai, sans-serif;
+    --font-mono: NotoSansMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
     --ease-fluid: 0.2, 0, 0, 1;
     --ease-fluid-in: .6, .2, .7, .4;
 }
 @supports (font-variation-settings: normal) {
     :root {
-        --font-sans: TikTokSansVariable, NotoSansThaiVariable, sans-serif;
+        --font-sans: NotoSansVariable, NotoSansThaiVariable, sans-serif;
+        --font-monospace: NotoSansMonoVariable, NotoSansThaiVariable, sans-serif;
         font-optical-sizing: auto;
         font-variation-settings:
             "slnt" 0,
-            "wdth" 92.5;
+            "wdth" 100;
     }
 }
 .dark-mode {
@@ -121,8 +121,8 @@ body,main {
     margin: 0;
     color: var(--ui-text-muted);
     background-color: var(--ui-bg);
-    font-size: 20px;
-    line-height: 1.35;
+    /* font-size: 20px;
+    line-height: 1.35; */
     font-weight: 500;
 }
 .web-header, .web-footer, main, footer {
@@ -173,14 +173,12 @@ p {
 }
 .font-hero {
     @apply text-6xl sm:text-7xl md:text-8xl font-bold my-[.2em];
-    font-variation-settings: 'wdth' 125;
 }
 .font-hero-desc {
     @apply text-2xl font-medium;
 }
 .web-title {
     @apply text-5xl sm:text-6xl my-[.2em] transition-[color] ease-fluid duration-100;
-    font-variation-settings: 'wdth' 125;
     a {
         cursor: pointer;
     }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b79be0a..9af3d47 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -54,13 +54,15 @@ export default defineNuxtConfig({
       viewport: 'width=device-width, initial-scale=1',
       link: [
         { rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },
+        // { rel: 'stylesheet', href: '/style.css' },
         // TYPEFACES
-        //{ rel: 'stylesheet', href: '/style.css' },
         // { rel: 'stylesheet', href: '/fonts/roboto/roboto.css' },
-        { rel: 'stylesheet', href: '/fonts/tiktoksans/tiktoksans.css' },
-        { rel: 'stylesheet', href: '/fonts/roboto/mono/mono.css' },
+        // { rel: 'stylesheet', href: '/fonts/tiktoksans/tiktoksans.css' },
+        { rel: 'stylesheet', href: '/fonts/noto/thai/noto+sans.css' },
+        { rel: 'stylesheet', href: '/fonts/noto/mono/noto+sans+mono.css' },
+        // { rel: 'stylesheet', href: '/fonts/roboto/mono/mono.css' },
         // { rel: 'stylesheet', href: '/fonts/roboto/serif/serif.css' },
-        { rel: 'stylesheet', href: '/fonts/noto/thai/thai.css' },
+        { rel: 'stylesheet', href: '/fonts/noto/thai/noto+sans+thai.css' },
       ],
       script: [
         //{ src: '/js/ripple.js', type: 'text/javascript', defer: true }