diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 72ab711b8f..30d2647f90 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -288,7 +288,7 @@ export default app;`
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
 		line-height: 1;
@@ -310,7 +310,7 @@ export default app;`
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
index f120839d8c..87b10cc8ff 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -63,7 +63,7 @@
 	.name {
 		line-height: 1;
 		display: none;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: 1.6rem;
 	}
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 17878cb000..8c0ca9d48f 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -53,7 +53,7 @@
 
 	h1 {
 		font-size: 4rem;
-		font-weight: 400;
+		font-weight: 500;
 	}
 
 	.standfirst {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 086e440536..dbaa30d649 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -73,7 +73,7 @@
 		line-height: 1;
 		z-index: 2;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 
 		a {
 			text-decoration: none;
@@ -111,7 +111,7 @@
 		font-size: var(--sk-text-s);
 		text-transform: uppercase;
 		font-weight: 400;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index 2104b75fc9..e653287548 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -10,7 +10,7 @@
 
 <style>
 	.breadcrumbs {
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
index 3d2925b2db..aa33b1ba60 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -134,7 +134,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 	}
 
 	.progress-container {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index f2dd23f4f2..512145718e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -197,7 +197,7 @@
 
 	footer .edit {
 		color: var(--sk-text-2);
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-s);
 		padding: 0 0 0 1.4em;
 		background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
index ce560e90d4..0384884dcd 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -119,7 +119,7 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-s);
 	}
 
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 9c8839d348..56b5be568a 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -304,7 +304,7 @@
 	.add-new {
 		position: relative;
 		display: inline-block;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		background: var(--sk-back-1);
 		border: none;
 		border-bottom: 3px solid transparent;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 94b6f2746c..e80e72f8a1 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -118,7 +118,7 @@
 		background: var(--sk-back-1, white);
 		text-align: left;
 		position: relative;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		border: none;
 		border-bottom: 3px solid transparent;
 		padding: 12px 12px 8px 12px;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 971000c302..f921016318 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,7 +69,7 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
 		text-transform: uppercase;
 		color: var(--sk-text-1, #333);
 		flex: 1;
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index dd7f17ecb3..32ef5f0498 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -301,7 +301,7 @@
 	button {
 		color: var(--sk-text-2, #999);
 		font-size: var(--sk-text-s);
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 		text-transform: uppercase;
 		display: block;
 	}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 9dae2f2010..035c4e0d37 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -146,7 +146,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		transition: 0.4s var(--quint-out);
 		transition-property: transform, background;
 		isolation: isolate;
-		font-family: var(--sk-font-heading);
+		font-family: var(--sk-font-ui);
 	}
 
 	nav::after {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 7d49cb874a..dadf47e148 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -85,7 +85,7 @@ h1 {
 :where(h1, h2, h3, h4, h5, h6) {
 	position: relative;
 	font-family: var(--sk-font-heading);
-	font-weight: 400;
+	font-weight: 500;
 	line-height: 1.35;
 	color: var(--sk-text-1);
 }
@@ -147,7 +147,7 @@ blockquote :last-child {
 
 /*  buttons -------------------------------- */
 button {
-	font-family: var(--sk-font-heading);
+	font-family: var(--sk-font-ui);
 	font-size: inherit;
 	background-color: transparent;
 	border: none;
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index 76db2cc1df..19f1021d36 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -1,4 +1,5 @@
 @import '@fontsource/eb-garamond';
+@import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
 @import '@fontsource/fira-mono';
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 780d1ae684..77ae1d6845 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,9 +22,10 @@
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
-	--sk-font-heading: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-		Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	--sk-font-ui: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	--sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
+	--sk-font-heading: var(--sk-font-body);
 	--sk-font-mono: 'Fira Mono', monospace;
 	--sk-text-xxl: 3.6rem;
 	--sk-text-xl: 3rem;