diff --git a/src/global/global.css b/src/global/global.css
index 5f41c2d..e3a5287 100644
--- a/src/global/global.css
+++ b/src/global/global.css
@@ -24,6 +24,8 @@
     --success: #279b48;
     --warning: #e58600;
     --error: #ee342b;
+    --sans-font-family: 'Gantari Variable', 'sans-serif';
+    --icon-font-family: 'Material Symbols Rounded';
   }
 
   .dark {
@@ -54,7 +56,7 @@
 }
 
 .icon {
-  font-family: 'Material Symbols Rounded';
+  font-family: var(--icon-font-family);
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 68ab3dc..d64bd40 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,8 +5,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['"Gantari Variable"', 'sans-serif'],
-        icon: ['"Material Symbols Rounded"'],
+        sans: 'var(--sans-font-family)',
+        icon: 'var(--icon-font-family)',
       },
       colors: {
         'surface': 'var(--surface)',