diff --git a/package-lock.json b/package-lock.json
index 47f751f..e34bd29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
+        "@fontsource-variable/outfit": "^5.2.8",
         "@mui/icons-material": "^7.1.1",
         "@mui/material": "^7.1.1",
         "@stripe/react-stripe-js": "^3.7.0",
@@ -2222,6 +2223,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource-variable/outfit": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/outfit/-/outfit-5.2.8.tgz",
+      "integrity": "sha512-4oUDCZx/Tcz6HZP423w/niqEH31Gks5IsqHV2ZZz1qKHaVIZdj2f0/S1IK2n8jl6Xo0o3N+3RjNHlV9R73ozQA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index cec5d37..d0a7b87 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@fontsource-variable/outfit": "^5.2.8",
     "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.1.1",
     "@stripe/react-stripe-js": "^3.7.0",
diff --git a/src/PrerenderProduct.js b/src/PrerenderProduct.js
index 0ef0fa2..dc7f96b 100644
--- a/src/PrerenderProduct.js
+++ b/src/PrerenderProduct.js
@@ -551,7 +551,7 @@ class PrerenderProduct extends React.Component {
                   })
                 },
                 style: { 
-                  fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+                  fontFamily: '"Outfit Variable","Roboto","Helvetica","Arial",sans-serif',
                   fontSize: '1rem',
                   lineHeight: '1.7',
                   color: '#333'
diff --git a/src/components/Stripe.js b/src/components/Stripe.js
index 147c157..0df8cf3 100644
--- a/src/components/Stripe.js
+++ b/src/components/Stripe.js
@@ -85,7 +85,7 @@ class Stripe extends Component {
                   colorWarning: '#FF9800',          // Orange for warnings
                   
                   // Typography matching your Roboto setup
-                  fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+                  fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
                   fontSizeBase: '16px',             // Base font size for mobile compatibility
                   fontWeightNormal: '400',          // Normal Roboto weight
                   fontWeightMedium: '500',          // Medium Roboto weight
diff --git a/src/components/ThemeCustomizerDialog.js b/src/components/ThemeCustomizerDialog.js
index b9460d9..87c436b 100644
--- a/src/components/ThemeCustomizerDialog.js
+++ b/src/components/ThemeCustomizerDialog.js
@@ -71,7 +71,7 @@ const ThemeCustomizerDialog = ({ open, onClose, theme, onThemeChange }) => {
         },
       },
       typography: {
-        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+        fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
         h4: {
           fontWeight: 600,
           color: '#33691E',
diff --git a/src/index.css b/src/index.css
index aca0be1..7d09a76 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,7 +41,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: 'Outfit Variable', Roboto, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-y: scroll; /* Always show vertical scrollbar */
diff --git a/src/index.js b/src/index.js
index 2b7a6ab..b94ef50 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "@fontsource-variable/outfit";
 import "./index.css";
 import App from "./App.js";
 import { BrowserRouter } from "react-router-dom";
diff --git a/src/theme.js b/src/theme.js
index f9a4ac0..c478376 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -29,7 +29,7 @@ const theme = createTheme({
     },
   },
   typography: {
-    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+    fontFamily: "'Outfit Variable', 'Roboto', 'Helvetica', 'Arial', sans-serif",
     h4: {
       fontWeight: 600,
       color: '#33691E',