diff --git a/css/styles.css b/css/styles.css
index 37fb476..35aedde 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -11,6 +11,15 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: "Outline";
+  src: url("../fonts/Outline-Light.woff2") format("woff2"),
+    url("../fonts/Outline-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* ==========================================================================
    CSS Reset & Normalize (Modern Best Practices)
    Based on normalize.css v8.0.1 + modern resets
@@ -206,6 +215,7 @@ table {
   --font-size-2xl: 1.5rem; /* 24px */
   --font-size-3xl: 1.875rem; /* 30px */
 
+  --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
diff --git a/js/components/search-bar.js b/js/components/search-bar.js
index 0f50633..f45f9f9 100644
--- a/js/components/search-bar.js
+++ b/js/components/search-bar.js
@@ -184,7 +184,7 @@ class SearchBar extends HTMLElement {
           padding: 0 16px;
           font-family: var(--font-family-base);
           font-size: var(--font-size-base, 16px);
-          font-weight: var(--font-weight-normal, 400);
+          font-weight: var(--font-weight-light, 300);
           color: #383838;
           background-color: transparent;
           border: none;
@@ -194,7 +194,7 @@ class SearchBar extends HTMLElement {
         .search-input::placeholder {
           font-family: var(--font-family-base);
           font-size: var(--font-size-base, 16px);
-          font-weight: var(--font-weight-normal, 400);
+          font-weight: var(--font-weight-light, 300);
           color: rgba(56, 56, 56, 0.5);
         }