diff --git a/packages/component-library/.storybook/preview.ts b/packages/component-library/.storybook/preview.ts
index bd3c061..252c8cc 100644
--- a/packages/component-library/.storybook/preview.ts
+++ b/packages/component-library/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/assets/fonts.css';
 
 const preview: Preview = {
   parameters: {
diff --git a/packages/component-library/src/assets/fonts.css b/packages/component-library/src/assets/fonts.css
new file mode 100644
index 0000000..33417c6
--- /dev/null
+++ b/packages/component-library/src/assets/fonts.css
@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+/* CSS Variable for font family - allows easy override by consumers */
+:root {
+    --component-library-font-family: 'Inter', sans-serif;
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/button/Button.css b/packages/component-library/src/components/button/Button.css
index ef01068..a0bbfcf 100644
--- a/packages/component-library/src/components/button/Button.css
+++ b/packages/component-library/src/components/button/Button.css
@@ -6,8 +6,8 @@
   gap: 8px;
   border: none;
   border-radius: 8px;
-  font-weight: 500;
-  font-family: sans-serif;
+  font-weight: 400;
+  font-family: var(--component-library-font-family);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   position: relative;
@@ -152,4 +152,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/input/Input.css b/packages/component-library/src/components/input/Input.css
index 473b894..9a0fd1a 100644
--- a/packages/component-library/src/components/input/Input.css
+++ b/packages/component-library/src/components/input/Input.css
@@ -10,7 +10,7 @@
   width: 100%;
   border: 1px solid rgb(203, 213, 225);
   border-radius: 6px;
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
   transition: all 0.2s ease-in-out;
   background-color: white;
   color: rgb(15, 23, 42);
@@ -59,17 +59,17 @@
   font-size: 0.875em;
   font-weight: 500;
   color: rgb(51, 65, 85);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
 }
 
 .input__error {
   font-size: 0.875em;
   color: rgb(220, 38, 38);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
 }
 
 .input__helper {
   font-size: 0.875em;
   color: rgb(100, 116, 139);
-  font-family: sans-serif;
-}
+  font-family: var(--component-library-font-family);
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/modal/Modal.css b/packages/component-library/src/components/modal/Modal.css
index 25cddb7..d3ea443 100644
--- a/packages/component-library/src/components/modal/Modal.css
+++ b/packages/component-library/src/components/modal/Modal.css
@@ -41,11 +41,11 @@
   font-size: 1.25em;
   font-weight: 600;
   color: rgb(15, 23, 42);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
 }
 
 .modal__content {
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
   font-size: 1rem;
 }
 
@@ -64,7 +64,7 @@
   justify-content: center;
   border-radius: 4px;
   transition: all 0.2s ease-in-out;
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family);
 }
 
 .modal__close:hover {
@@ -104,4 +104,4 @@
     transform: translateY(0);
     opacity: 1;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/component-library/src/font.ts b/packages/component-library/src/font.ts
new file mode 100644
index 0000000..3b82447
--- /dev/null
+++ b/packages/component-library/src/font.ts
@@ -0,0 +1,2 @@
+// Global styles (includes Inter font from Google Fonts)
+import './assets/fonts.css';
\ No newline at end of file