From 032bdd0695f7625125e5d3c332246a17d39d4c19 Mon Sep 17 00:00:00 2001
From: mariannuar <mariannuar@gmail.com>
Date: Fri, 10 Oct 2025 10:27:26 -0600
Subject: [PATCH] chore(EMULSIF-544): make fonts load as expected

---
 src/foundation/typography/_fonts.scss | 163 ++++++++++++++++++++++++--
 1 file changed, 154 insertions(+), 9 deletions(-)

diff --git a/src/foundation/typography/_fonts.scss b/src/foundation/typography/_fonts.scss
index c0ea80f..6e4fb72 100644
--- a/src/foundation/typography/_fonts.scss
+++ b/src/foundation/typography/_fonts.scss
@@ -1,9 +1,154 @@
-// $font-url: '../../assets/fonts';
-
-// @font-face {
-//   font-family: [font-family];
-//   src: url('#{$font-url}/[font-filename]') format('truetype');
-//   font-weight: 500;
-//   font-style: normal;
-//   font-display: swap;
-// }
+$font-url: '../../assets/fonts';
+
+/* Inter */
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-url}/inter/Inter-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Sentinel */
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-Black.ttf') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-Black.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-Bold.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-Light.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-Light.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-LightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-Medium.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Sentinel;
+  src:
+    url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('truetype'),
+    url('#{$font-url}/sentinel/Sentinel-Semibold.woff') format('woff'),
+    url('#{$font-url}/sentinel/Sentinel-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}