diff --git a/frontend/index.html b/frontend/index.html
index 5e3922b..b3c2983 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,10 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <!-- Non-web-safe fonts: load from Google Fonts so they render consistently across devices. Swap font by changing the href and --font-sans in index.css. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/main-page/grants/grant-details/GrantDetails.tsx b/frontend/src/main-page/grants/grant-details/GrantDetails.tsx
deleted file mode 100644
index 3a70fc7..0000000
--- a/frontend/src/main-page/grants/grant-details/GrantDetails.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import '../styles/GrantDetails.css';
-import { Grant } from '../../../../../middle-layer/types/Grant';
-
-interface GrantDetailsProps {
-    isEditing: boolean;
-    curGrant: Grant;
-    setCurGrant: React.Dispatch<React.SetStateAction<Grant>>;
-}
-
-const GrantDetails: React.FC<GrantDetailsProps> = ({isEditing, curGrant, setCurGrant})  => {
-
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const {name, value} = event.target;
-
-        // only modifies the changed field
-        setCurGrant(curGrant =>({
-            ...curGrant,
-            [name]: value
-        }));
-    };
-
-
-    return (
-        <div className="grant-details">
-            <h3>Description</h3>
-            <textarea
-                className="attribute-value large-textarea bg-white"
-                name="description"
-                value={curGrant.description}
-                onChange={handleChange}
-                readOnly={!isEditing}
-            />
-
-        </div>
-    );
-}
-
-export default GrantDetails;
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
index dc4c7c5..3a1f995 100644
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
@@ -455,7 +455,7 @@ const NewGrantModal: React.FC<{
       <div className="modal-content ">
         {" "}
         {/*Popup container */}
-        <h2 className="font-family-helvetica">New Grant</h2>
+        <h2 className="">New Grant</h2>
         <div className="flex">
           {" "}
           {/* Major components in two columns */}
@@ -464,13 +464,13 @@ const NewGrantModal: React.FC<{
             {/*Organization name and input */}
             <div className="w-full md:mb-0">
               <label
-                className="font-family-helvetica  sm:text-sm lg:text-base flex block text-black  mb-1"
+                className=" sm:text-sm lg:text-base flex block text-black  mb-1"
                 htmlFor="grid-first-name"
               >
                 Organization Name *
               </label>
               <input
-                className="font-family-helvetica block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
+                className="block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight"
                 id="grid-first-name"
                 type="text"
                 placeholder="Type Here"
@@ -488,13 +488,13 @@ const NewGrantModal: React.FC<{
                   {/*Application date and input */}
                   <div className="w-1/2">
                     <label
-                      className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+                      className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
                       htmlFor="grid-city"
                     >
                       Application Date *
                     </label>
                     <input
-                      className={`font-family-helvetica appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
+                      className={`appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
                         applicationDate ? "text-black" : "text-gray-500"
                       }`}
                       id="grid-city"
@@ -510,13 +510,13 @@ const NewGrantModal: React.FC<{
                   {/*Grant Start Date and input */}
                   <div className=" w-1/2">
                     <label
-                      className="font-family-helvetica flex block tracking-wide text-black text-black  sm:text-sm lg:text-base mb-1"
+                      className="flex block tracking-wide text-black text-black  sm:text-sm lg:text-base mb-1"
                       htmlFor="grid-state"
                     >
                       Grant Start Date *
                     </label>
                     <input
-                      className={`font-family-helvetica w-full appearance-none block w-full h-[42px] bg-tan placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
+                      className={`w-full appearance-none block w-full h-[42px] bg-tan placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500 ${
                         grantStartDate ? "text-black" : "text-gray-500"
                       }`}
                       id="grid-city"
@@ -532,7 +532,7 @@ const NewGrantModal: React.FC<{
                 {/*Estimated completition time and input - need to make wider (length of application date and grant start date)*/}
                 <div className="w-full mt-11">
                   <label
-                    className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
                     htmlFor="grid-state"
                   >
                     Estimated Completion Time (in hours) *
@@ -540,7 +540,7 @@ const NewGrantModal: React.FC<{
                   <input
                     type="number"
                     min="0"
-                    className="font-family-helvetica appearance-none block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
+                    className="appearance-none block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500"
                     id="grid-city"
                     value={estimatedCompletionTimeInHours}
                     onChange={(e) =>
@@ -555,7 +555,7 @@ const NewGrantModal: React.FC<{
                 {/*Report deadlines label and grey box */}
                 <div className="h-full">
                   <label
-                    className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
                     htmlFor="grid-zip"
                   >
                     Report Deadlines
@@ -564,7 +564,7 @@ const NewGrantModal: React.FC<{
                     className="p-2 rounded-[1.2rem] sm:h-52 xl:h-40 overflow-y-auto overflow-x-hidden bg-grey-400 border border-black"
                   >
                     <button
-                      className="font-family-helvetica w-full h-[42px] text-xs mb-2 flex items-center justify-center bg-primary-800 hover:bg-primary-900 text-black border border-black"
+                      className="w-full h-[42px] text-xs mb-2 flex items-center justify-center bg-primary-800 hover:bg-primary-900 text-black border border-black"
                       onClick={_addReportDate}
                     >
                       Add Deadline +
@@ -573,7 +573,7 @@ const NewGrantModal: React.FC<{
                       <div key={index} className="flex gap-2 mb-2 w-full">
                         <input
                           key={index}
-                          className="font-family-helvetica flex-1 min-w-0 h-[42px] bg-tan text-black rounded border border-black"
+                          className="flex-1 min-w-0 h-[42px] bg-tan text-black rounded border border-black"
                           type="date"
                           value={
                             date
@@ -590,7 +590,7 @@ const NewGrantModal: React.FC<{
                         />
                         {reportDates.length > 0 && (
                           <button
-                            className="font-family-helvetica w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
+                            className="w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
                             onClick={() => _removeReportDate(index)}
                           >
                             ✕
@@ -607,13 +607,13 @@ const NewGrantModal: React.FC<{
               {/*Timeline label and input */}
               <div className="w-full">
                 <label
-                  className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+                  className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
                   htmlFor="grid-first-name"
                 >
                   Timeline (in years) *
                 </label>
                 <input
-                  className="font-family-helvetica appearance-none block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
+                  className="appearance-none block w-full h-[42px] bg-tan text-black placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none"
                   type="number"
                   min="0"
                   placeholder="Type Here"
@@ -625,13 +625,13 @@ const NewGrantModal: React.FC<{
               {/*Amount label and input */}
               <div className="w-full ">
                 <label
-                  className="font-family-helvetica flex block tracking-wide text-black placeholder:text-gray-400  sm:text-sm lg:text-base mb-1"
+                  className="flex block tracking-wide text-black placeholder:text-gray-400  sm:text-sm lg:text-base mb-1"
                   htmlFor="grid-first-name"
                 >
                   Amount (in $) *
                 </label>
                 <CurrencyInput
-                  className="font-family-helvetica appearance-none block w-full h-[42px] mb-[2px] bg-tan text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
+                  className="appearance-none block w-full h-[42px] mb-[2px] bg-tan text-gray-700 border border-black rounded px-4 leading-tight focus:outline-none "
                   min={0}
                   decimalsLimit={2}
                   placeholder="Type Here"
@@ -647,7 +647,7 @@ const NewGrantModal: React.FC<{
             <div className="flex w-full mb-16">
               {/*BCAN POC div*/}
               <div className="w-full pr-3">
-                  <label className="font-family-helvetica mb-1 flex block tracking-wide text-black text-lg" htmlFor="grid-zip">
+                  <label className="mb-1 flex block tracking-wide  sm:text-sm lg:text-base text-black" htmlFor="grid-zip">
                       BCAN POC *
                   </label>
                   {/*Box div*/} 
@@ -662,7 +662,7 @@ const NewGrantModal: React.FC<{
                       }}
                       placeholder="Name"
                       />
-                        <input className="font-family-helvetica w-full h-[48px] bg-tan text-gray-700 rounded border border-black"
+                        <input className="w-full h-[48px] bg-tan text-gray-700 rounded border border-black"
                          placeholder="e-mail" 
                          value={bcanPocEmail}
                          readOnly
@@ -674,7 +674,7 @@ const NewGrantModal: React.FC<{
               {/*Grant Provider POC div*/}
               <div className="w-full pl-3">
                 <label
-                  className="font-family-helvetica mb-1 flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-left"
+                  className="mb-1 flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-left"
                   htmlFor="grid-zip"
                 >
                   Grant Provider POC
@@ -686,14 +686,14 @@ const NewGrantModal: React.FC<{
                   <MdOutlinePerson2 className="sm:p-1 lg:p-2 w-1/4 h-full" />
                   <div className="w-3/4">
                     <input
-                      className="font-family-helvetica w-full h-[42px] bg-tan text-gray-700 rounded border border-black"
+                      className="w-full h-[42px] bg-tan text-gray-700 rounded border border-black"
                       id="grid-city"
                       placeholder="Name"
                       value={grantProviderPocName}
                       onChange={(e) => setGrantProviderPocName(e.target.value)}
                     />
                     <input
-                      className="font-family-helvetica w-full h-[42px] bg-tan text-gray-700 rounded border border-black"
+                      className="w-full h-[42px] bg-tan text-gray-700 rounded border border-black"
                       id="grid-city"
                       placeholder="e-mail"
                       value={grantProviderPocEmail}
@@ -711,13 +711,13 @@ const NewGrantModal: React.FC<{
                 {/*Qualify label and input */}
                 <div className="w-full ">
                   <label
-                    className="font-family-helvetica flex block tracking-wide text-black sm:text-sm lg:text-base mb-1 text-left"
+                    className="flex block tracking-wide text-black sm:text-sm lg:text-base mb-1 text-left"
                     htmlFor="grid-first-name"
                   >
                     Does BCAN qualify? *
                   </label>
                   <select
-                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
+                    className={`appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
                       doesBcanQualify == "" ? "text-gray-500" : "text-black"
                     }`}
                     id="grid-first-name"
@@ -733,13 +733,13 @@ const NewGrantModal: React.FC<{
                 {/*Status label and input */}
                 <div className="w-full">
                   <label
-                    className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
                     htmlFor="grid-first-name"
                   >
                     Status
                   </label>
                   <select
-                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-tan placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
+                    className={`appearance-none block w-full h-[42px] bg-tan placeholder:text-gray-400 border border-black rounded py-3 px-4 mb-3 leading-tight focus:outline-none ${
                       status == null ? "text-gray-500" : "text-black"
                     }`}
                     id="grid-first-name"
@@ -758,13 +758,13 @@ const NewGrantModal: React.FC<{
                 {/*Restriction types label and input */}
                 <div className="w-full">
                   <label
-                    className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text0left"
+                    className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text0left"
                     htmlFor="grid-first-name"
                   >
                     Restriction type *
                   </label>
                   <select
-                    className={`font-family-helvetica appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
+                    className={`appearance-none block w-full h-[42px] bg-tan border border-black rounded py-3 px-4 leading-tight focus:outline-none ${
                       isRestricted == "" ? "text-gray-500" : "text-black"
                     }`}
                     id="grid-first-name"
@@ -784,7 +784,7 @@ const NewGrantModal: React.FC<{
 
               {/*Scope Documents div p-2 h-full w-1/2 flex-col*/}
               <div className="w-1/2 flex-col pl-3">
-                <label className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-start">
+                <label className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1 text-start">
                   Scope Documents
                 </label>
 
@@ -793,7 +793,7 @@ const NewGrantModal: React.FC<{
                   <button
                     type="button"
                     onClick={_addAttachment}
-                    className="items-center flex font-family-helvetica w-full h-[42px] mt-1 mb-2 justify-center  bg-primary-800 hover:bg-primary-900 text-black border border-black"
+                    className="items-center flex w-full h-[42px] mt-1 mb-2 justify-center  bg-primary-800 hover:bg-primary-900 text-black border border-black"
                   >
                     <FiUpload className="mr-2" />
                     <span>Upload Documents</span>
@@ -881,7 +881,7 @@ const NewGrantModal: React.FC<{
                         className="flex gap-2 mb-2 w-full items-center"
                       >
                         <div
-                          className="overflow-hidden rounded-md font-family-helvetica flex-1 min-w-0 h-[42px] bg-tan text-gray-700 border border-black flex items-center px-3 justify-between"
+                          className="overflow-hidden rounded-md flex-1 min-w-0 h-[42px] bg-tan text-gray-700 border border-black flex items-center px-3 justify-between"
                         >
                           <a
                             href={attachment.url}
@@ -900,7 +900,7 @@ const NewGrantModal: React.FC<{
                           </span>
                         </div>
                         <button
-                          className="font-family-helvetica w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
+                          className="w-5 h-[42px] flex-shrink-0 rounded text-white font-bold flex items-center justify-center bg-red-light border border-black"
                           onClick={() => _removeAttachment(index)}
                         >
                           ✕
@@ -918,13 +918,13 @@ const NewGrantModal: React.FC<{
         {/*Description and input */}
         <div className="w-full mt-4">
           <label
-            className="font-family-helvetica flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
+            className="flex block tracking-wide text-black  sm:text-sm lg:text-base mb-1"
             htmlFor="grid-first-name"
           >
             Description
           </label>
           <textarea
-            className="font-family-helvetica h-48 block w-full bg-tan text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
+            className="h-48 block w-full bg-tan text-gray-700 border border-black rounded py-3 px-4 mb-3 leading-tight"
             id="grid-first-name"
             value={description}
             onChange={(e) => _setDescription(e.target.value)}
@@ -932,13 +932,13 @@ const NewGrantModal: React.FC<{
         </div>
         <div className="button-row">
           <button
-            className="font-family-helvetica h-[42px] flex items-center justify-center text-black bg-white border border-black"
+            className="h-[42px] flex items-center justify-center text-black bg-white border border-black"
             onClick={onClose}
           >
             Close
           </button>
           <button
-            className="font-family-helvetica h-[42px] flex items-center justify-center text-black bg-primary-800 border border-black"
+            className="h-[42px] flex items-center justify-center text-black bg-primary-800 border border-black"
             onClick={handleSubmit}
           >
             Save
@@ -952,13 +952,13 @@ const NewGrantModal: React.FC<{
           <div
             className="bg-white rounded-lg p-6 max-w-md mx-4 border-2 border-black"
           >
-            <h3 className="font-family-helvetica text-xl font-bold mb-2">
+            <h3 className="text-xl font-bold mb-2">
               Error
             </h3>
-            <p className="font-family-helvetica mb-4">{_errorMessage}</p>
+            <p className="mb-4">{_errorMessage}</p>
             <button
               onClick={() => setShowErrorPopup(false)}
-              className="font-family-helvetica px-4 py-2 rounded hover:opacity-80 bg-primary-800 text-black border border-black"
+              className="px-4 py-2 rounded hover:opacity-80 bg-primary-800 text-black border border-black"
             >
               Close
             </button>
diff --git a/frontend/src/main-page/grants/new-grant/UserDropdown.tsx b/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
index 55707ee..1507489 100644
--- a/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
+++ b/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
@@ -49,7 +49,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({
     <div ref={dropdownRef} className="user-dropdown-container">
       {/* Input field that opens dropdown */}
       <input
-        className="user-dropdown-input font-family-helvetica"
+        className="user-dropdown-input"
         placeholder={placeholder}
         value={selectedUser ? selectedUser.name : searchTerm}
         onChange={(e) => {
diff --git a/frontend/src/main-page/grants/styles/CalendarDropdown.css b/frontend/src/main-page/grants/styles/CalendarDropdown.css
index bd3a471..5813e9b 100644
--- a/frontend/src/main-page/grants/styles/CalendarDropdown.css
+++ b/frontend/src/main-page/grants/styles/CalendarDropdown.css
@@ -12,7 +12,7 @@
     background-color: white;
     cursor: pointer;
     font-size: 1rem;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-sans);
     width: 100%;
     height: 42px;
 }
diff --git a/frontend/src/main-page/grants/styles/NewGrantModal.css b/frontend/src/main-page/grants/styles/NewGrantModal.css
index 4621571..fa99776 100644
--- a/frontend/src/main-page/grants/styles/NewGrantModal.css
+++ b/frontend/src/main-page/grants/styles/NewGrantModal.css
@@ -85,7 +85,7 @@
   grid-column: 1 / span 2; /* let the title span across both columns */
   margin-top: 0;
   margin-bottom: 1rem;
-  font-size: 1.8rem;
+  font-size: var(--font-size-2xl);
   font-weight: 600;
   text-align: center;
   text-align: left;
@@ -97,7 +97,7 @@
 .modal-content textarea {
   width: 100%;
   padding: 0.6rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   margin-bottom: 0.25rem;
   border: 0.075rem solid black;
   border-radius: 15px;
@@ -177,7 +177,7 @@
   border: black 0.075rem solid;
   color: black;
   padding: 0.75rem 1.25rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   border-radius: 15px;
   cursor: pointer;
   transition: background-color 0.2s ease;
diff --git a/frontend/src/main-page/grants/styles/UserDropdown.css b/frontend/src/main-page/grants/styles/UserDropdown.css
index 3cae3eb..b14ebf8 100644
--- a/frontend/src/main-page/grants/styles/UserDropdown.css
+++ b/frontend/src/main-page/grants/styles/UserDropdown.css
@@ -14,6 +14,7 @@
   padding: 0 12px;
   cursor: pointer;
   color: var(--color-grey-800);
+  font-size: 16px;
 }
 
 .user-dropdown-input:focus {
@@ -64,7 +65,6 @@
   font-size: 14px;
   color: gray;
   margin-top: 2px;
-  font-family: helvetica;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 0bb78ce..c305c80 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -2,7 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * Design style guide: global font definitions (single source of truth).
+ * - Font family and size baseline live here. Non-web-safe fonts are loaded via
+ *   Google Fonts in index.html (see https://getdevdone.com/blog/non-web-fonts.html).
+ * - To swap fonts: (1) update the link in index.html to the new font’s Google Fonts URL,
+ *   (2) set --font-sans (or --font-serif) in :root below to the new family name.
+ */
 :root {
+  /* Font families: use CSS vars so swapping is a one-line change. */
+  --font-sans: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --font-serif: Georgia, "Times New Roman", serif;
+
+  /* Size baseline and scale (all relative to base for easy swapping). */
+  --font-size-base: 1rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-hero: 3.2rem;
+
   --color-green-dark: #119548;
   --color-green: #5ab911;
   --color-green-light: #c6fbd3;
@@ -52,7 +75,8 @@
   --color-black: #000000;
   --color-white: #ffffff;
 
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
   line-height: 1.5;
   font-weight: 400;
 
@@ -84,7 +108,7 @@ body {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: var(--font-size-hero);
   line-height: 1.1;
 }
 
@@ -92,9 +116,9 @@ button {
   border-radius: 15px;
   border: 0.1rem solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: var(--font-size-base);
   font-weight: 500;
-  font-family: inherit;
+  font-family: var(--font-sans);
   background-color: black;
   cursor: pointer;
   transition: border-color 0.25s;
diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css
index 2fbd93f..30d6a1a 100644
--- a/frontend/src/styles/notification.css
+++ b/frontend/src/styles/notification.css
@@ -22,9 +22,8 @@
 
 
 .popup-header h3 {
-  font-size: 1.1rem;
+  font-size: var(--font-size-lg);
   font-weight: 600;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   color: black;
   margin: 0;
 }
@@ -33,7 +32,7 @@
 .close-button {
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   cursor: pointer;
   color: gray;
 }
@@ -58,7 +57,7 @@
   padding: 8px 10px;
   padding-right: 35px;
   margin-bottom: 2px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-sm);
   transition: background-color 0.2s ease;
   display: flex;
 }
@@ -83,13 +82,13 @@
 
 .notification-title {
   font-weight: 600;
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   color: black;
   line-height: 1.15;
 }
 
 .notification-message {
-  font-size: 12.5px;
+  font-size: var(--font-size-xs);
   color: var(--color-grey-600);
   margin-top: 4px;
   line-height: 1.2;
@@ -105,7 +104,7 @@
   right: 10px;
   color: gray;
   cursor: pointer;
-  font-size: 0.9rem
+  font-size: var(--font-size-sm);
 }
 
 .notification-trash-icon:hover {
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index b2ddf0b..732ac92 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -71,10 +71,20 @@ export default {
       black: "#000000",
     },
     fontFamily: {
-      sans: ["Montserrat", "sans-serif"],
-      serif: ["Georgia", "serif"],
+      sans: ["var(--font-sans)", "sans-serif"],
+      serif: ["var(--font-serif)", "serif"],
     },
     extend: {
+      fontSize: {
+        xs: ["var(--font-size-xs)", { lineHeight: "1rem" }],
+        sm: ["var(--font-size-sm)", { lineHeight: "1.25rem" }],
+        base: ["var(--font-size-base)", { lineHeight: "1.5rem" }],
+        lg: ["var(--font-size-lg)", { lineHeight: "1.75rem" }],
+        xl: ["var(--font-size-xl)", { lineHeight: "1.75rem" }],
+        "2xl": ["var(--font-size-2xl)", { lineHeight: "2rem" }],
+        "3xl": ["var(--font-size-3xl)", { lineHeight: "2.25rem" }],
+        "4xl": ["var(--font-size-4xl)", { lineHeight: "2.5rem" }],
+      },
       spacing: {
         "8xl": "96rem",
         "9xl": "128rem",
