fix: improved logic for use fonts from css variables

Author: coderdiaz

src/styles/global.css

@@ -1,7 +1,12 @@
-:root { font-family: "Inter", sans-serif; }
+:root {
+  font-family: var(--font-inter), sans-serif;
+}
 
 @supports (font-variation-settings: normal) {
-  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+  :root {
+    font-family: var(--font-inter-variable), sans-serif;
+    font-optical-sizing: auto;
+  }
 }
 
 @import 'tailwindcss';
@@ -12,32 +17,32 @@
 
 :root {
   --palette-base: #fff;
-  --palette-50: oklch(0.98 0.005 95.9);          /* #fafafa */
-  --palette-100: oklch(0.97 0.003 107.8);        /* #f5f5f5 */
-  --palette-200: oklch(0.93 0.003 107.8);        /* #e5e5e5 */
-  --palette-300: oklch(0.89 0.003 107.8);        /* #d4d4d4 */
-  --palette-400: oklch(0.74 0.003 107.8);        /* #a3a3a3 */
-  --palette-500: oklch(0.6 0.003 107.8);         /* #737373 */
-  --palette-600: oklch(0.5 0.003 107.8);         /* #525252 */
-  --palette-700: oklch(0.45 0.003 107.8);        /* #404040 */
-  --palette-800: oklch(0.35 0.003 107.8);        /* #262626 */
-  --palette-900: oklch(0.3 0.003 107.8);         /* #171717 */
-  --palette-950: oklch(0.25 0.003 107.8);        /* #0a0a0a */
+  --palette-50: oklch(0.98 0.005 95.9); /* #fafafa */
+  --palette-100: oklch(0.97 0.003 107.8); /* #f5f5f5 */
+  --palette-200: oklch(0.93 0.003 107.8); /* #e5e5e5 */
+  --palette-300: oklch(0.89 0.003 107.8); /* #d4d4d4 */
+  --palette-400: oklch(0.74 0.003 107.8); /* #a3a3a3 */
+  --palette-500: oklch(0.6 0.003 107.8); /* #737373 */
+  --palette-600: oklch(0.5 0.003 107.8); /* #525252 */
+  --palette-700: oklch(0.45 0.003 107.8); /* #404040 */
+  --palette-800: oklch(0.35 0.003 107.8); /* #262626 */
+  --palette-900: oklch(0.3 0.003 107.8); /* #171717 */
+  --palette-950: oklch(0.25 0.003 107.8); /* #0a0a0a */
 }
 
 .dark {
   --palette-base: #000;
-  --palette-50: oklch(0.25 0.003 107.8);          /* #0a0a0a */
-  --palette-100: oklch(0.3 0.003 107.8);          /* #171717 */
-  --palette-200: oklch(0.35 0.003 107.8);         /* #262626 */
-  --palette-300: oklch(0.4 0.003 107.8);          /* #373737 */
-  --palette-400: oklch(0.5 0.003 107.8);          /* #525252 */
-  --palette-500: oklch(0.67 0.003 107.8);         /* #8a8a8a */
-  --palette-600: oklch(0.74 0.003 107.8);         /* #a3a3a3 */
-  --palette-700: oklch(0.89 0.003 107.8);         /* #d4d4d4 */
-  --palette-800: oklch(0.93 0.003 107.8);         /* #e5e5e5 */
-  --palette-900: oklch(0.97 0.003 107.8);         /* #f5f5f5 */
-  --palette-950: oklch(0.98 0.005 95.9);          /* #fafafa */
+  --palette-50: oklch(0.25 0.003 107.8); /* #0a0a0a */
+  --palette-100: oklch(0.3 0.003 107.8); /* #171717 */
+  --palette-200: oklch(0.35 0.003 107.8); /* #262626 */
+  --palette-300: oklch(0.4 0.003 107.8); /* #373737 */
+  --palette-400: oklch(0.5 0.003 107.8); /* #525252 */
+  --palette-500: oklch(0.67 0.003 107.8); /* #8a8a8a */
+  --palette-600: oklch(0.74 0.003 107.8); /* #a3a3a3 */
+  --palette-700: oklch(0.89 0.003 107.8); /* #d4d4d4 */
+  --palette-800: oklch(0.93 0.003 107.8); /* #e5e5e5 */
+  --palette-900: oklch(0.97 0.003 107.8); /* #f5f5f5 */
+  --palette-950: oklch(0.98 0.005 95.9); /* #fafafa */
 }
 
 @theme inline {
@@ -50,5 +55,6 @@
   --color-headings: var(--palette-800);
   --color-border: var(--palette-300);
 
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }

tailwind.config.mjs

@@ -5,6 +5,7 @@ module.exports = {
       typography: () => ({
         DEFAULT: {
           css: {
+            fontFamily: `var(--font-inter-variable), var(--font-inter), 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"','"Segoe UI Emoji"', 'Segoe UI Symbol','"Noto Color Emoji"'`,
             '--tw-prose-body': 'var(--color-foreground)',
             '--tw-prose-headings': 'var(--color-headings)',
             // '--tw-prose-lead': 'var(--color-pink-700)',
@@ -42,4 +43,4 @@ module.exports = {
       }),
     },
   },
-}
+};