diff --git a/src/Elastic.Markdown/Assets/markdown/list.css b/src/Elastic.Markdown/Assets/markdown/list.css
index 262ed7e22..6a04a9cad 100644
--- a/src/Elastic.Markdown/Assets/markdown/list.css
+++ b/src/Elastic.Markdown/Assets/markdown/list.css
@@ -1,6 +1,5 @@
 .markdown-content {
 	ol,ul {
-		font-family: "Inter", sans-serif;
 		@apply mt-4;
 		line-height: 1.5em;
 		letter-spacing: 0;
diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index 863ca365c..4d59c9392 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -3,65 +3,57 @@
 	font-size: 16px;
 
 	h1 {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-4xl text-ink-dark font-semibold;
 		line-height: 1.2em;
 		letter-spacing: -0.04em;
 	}
 	
 	h2 {
-		font-family: "Mier B", "Inter", sans-serif;
+
 		@apply text-2xl text-ink-dark font-bold mt-10;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 	
 	h3 {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-xl text-ink-dark font-bold mt-8;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	h4 {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-base text-ink-dark font-bold mt-8;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	h5 {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-sm text-ink-dark font-bold mt-8;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	h6 {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-xs text-ink-dark font-bold mt-8;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 	
 	h1, h2, h3, h4, h5, h6 {
+		@apply font-sans;
 		a {
-			font-family: "Mier B", "Inter", sans-serif;
-			@apply text-ink-dark hover:text-ink-dark no-underline;
+			@apply font-sans text-ink-dark hover:text-ink-dark no-underline;
 		}
 	}
 	
 	p {
-		font-family: "Inter", sans-serif;
-		@apply text-base text-ink mt-4;
+		@apply font-body text-base text-ink mt-4;
 		letter-spacing: 0;
 		line-height: 1.5em;
 		text-wrap: pretty;
 	}
 	
 	a {
-		font-family: "Inter", sans-serif;
-		text-wrap: nowrap;
-		@apply text-blue-elastic hover:text-blue-800 underline;
+		@apply font-body text-blue-elastic hover:text-blue-800 underline;
 	}
 }
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index e16fa0016..b16a19dac 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -42,8 +42,8 @@
 
 @layer components {
 	.link {
-		font-family: "Mier B", "Inter", sans-serif;
 		@apply 
+			font-sans
 			text-blue-elastic 
 			text-nowrap
 			font-semibold
@@ -89,9 +89,9 @@
 	}
 
 	.applies {
+		@apply font-sans;
 		border-bottom: 1px solid var(--color-gray-300);
 		padding-bottom: calc(var(--spacing) * 3);
-		font-family: "Mier B", "Inter", sans-serif;
 
 		.applies-to-label {
 			display: block;
@@ -137,3 +137,7 @@
 :is(a, button, input, textarea, summary):focus:not(:focus-visible) {
 	outline: none;
 }
+
+.markdown-content {
+	@apply font-body;
+}
diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css
index 5d5c32124..ac705780d 100644
--- a/src/Elastic.Markdown/Assets/theme.css
+++ b/src/Elastic.Markdown/Assets/theme.css
@@ -2,6 +2,7 @@
 	/*--color-*: initial;*/
 
 	--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
 	--color-white: #FFFFFF;
 	--color-black: #000000;