feat: add Outfit Variable font and update global typography settings

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",

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",

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'

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

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',

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 */

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";

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',