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 76ef9ab860..72ab711b8f 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);
+		font-family: var(--sk-font-heading);
 		font-size: 1.6rem;
 		color: var(--sk-text-1);
 		line-height: 1;
@@ -310,8 +310,8 @@ export default app;`
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--sk-font);
-		font-size: 1.6rem;
+		font-family: var(--sk-font-heading);
+		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
 		flex: 1;
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 30984390ab..f120839d8c 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);
+		font-family: var(--sk-font-heading);
 		font-size: 1.6rem;
 	}
 
@@ -99,7 +99,7 @@
 	.menu button,
 	.menu a {
 		background-color: transparent;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		padding: 0.4rem 0;
diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte
index 888fcf179f..0687999688 100644
--- a/apps/svelte.dev/src/routes/+error.svelte
+++ b/apps/svelte.dev/src/routes/+error.svelte
@@ -68,7 +68,7 @@
 		background-color: var(--sk-theme-2);
 		color: white;
 		padding: 12px 16px;
-		font: 600 16px/1.7 var(--sk-font);
+		font: 600 16px/1.7 var(--sk-font-body);
 		border-radius: 2px;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 32dad6aeb1..5309508950 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -74,7 +74,7 @@
 	strong {
 		font-size: var(--sk-text-l);
 		text-align: center;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-heading);
 		text-transform: lowercase;
 		font-weight: 400;
 		color: var(--sk-text-2);
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
index 221fb1b941..9ba251fb72 100644
--- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
+++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -82,7 +82,7 @@
 		font-weight: 200;
 		line-height: 1.2;
 		color: var(--sk-text-2);
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		margin-bottom: 2rem;
 		/* max-width: 12em; */
 		/* margin: 0 auto; */
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 5d3d161577..85bd52b284 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -64,6 +64,7 @@
 	.post:where(:first-child, :nth-child(2))::before {
 		content: 'Latest post • ' attr(data-pubdate);
 		color: var(--sk-theme-3);
+		font-family: var(--sk-font-heading);
 		font-size: var(--sk-text-xs);
 		font-weight: 400;
 		letter-spacing: 0.05em;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 635075f274..ef39e1ad36 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -68,6 +68,7 @@
 		line-height: 1;
 		z-index: 2;
 		margin: 6rem 0 2rem 0;
+		font-family: var(--sk-font-heading);
 
 		a {
 			text-decoration: none;
@@ -102,9 +103,10 @@
 
 	.controls span {
 		display: block;
-		font-size: 1.2rem;
+		font-size: var(--sk-text-s);
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: 400;
+		font-family: var(--sk-font-heading);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index ca5cfac8bb..84238f0a36 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -70,7 +70,7 @@
 		}
 
 		label {
-			text-transform: uppercase;
+			font-family: var(--sk-font-heading);
 			display: block;
 		}
 
@@ -138,10 +138,9 @@
 			}
 
 			& label {
-				font-size: var(--sk-text-s);
+				font-size: var(--sk-text-m);
 
-				letter-spacing: 0.1em;
-				font-weight: 600;
+				font-weight: 500;
 				display: block;
 
 				&::before {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
index c3df799d60..29e40cc953 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
@@ -67,6 +67,7 @@
 	input {
 		flex: 1;
 		padding: 0.5rem 1rem 0.4rem 1rem;
+		border: none;
 		background-color: var(--sk-back-3);
 		color: var(--sk-text-1);
 		font-family: inherit;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
index 68afeb6978..3d2925b2db 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -134,6 +134,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
+		font-family: var(--sk-font-heading);
 	}
 
 	.progress-container {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index 0662c0f591..a32c91aa46 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -191,7 +191,7 @@
 
 	header strong,
 	h1 {
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-text-s);
 	}
 
 	.menu {
@@ -251,6 +251,7 @@
 		text-align: center;
 		color: var(--sk-text-2);
 		font-weight: 400;
+		font-size: var(--sk-text-s);
 	}
 
 	h1 .desktop {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index 8c0901427f..8e39d6b854 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -194,7 +194,8 @@
 
 	footer .edit {
 		color: var(--sk-text-2);
-		font-size: 1.4rem;
+		font-family: var(--sk-font-heading);
+		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);
 		background-size: 1em 1em;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
index bb944ee827..66a1d7d0cb 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
@@ -7,7 +7,7 @@
 }
 
 .cm-editor .cm-scroller {
-	font-family: var(--font-mono);
+	font-family: var(--sk-font-mono);
 	font-size: 1.3rem;
 	line-height: 2rem;
 }
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index bd6d928768..5fa502a579 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: 1.4rem;
+		--font-size: var(--sk-text-s);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
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 85a16c059f..ce560e90d4 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -119,6 +119,8 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
+		font-family: var(--sk-font-heading);
+		font-size: var(--sk-text-s);
 	}
 
 	:focus-visible {
@@ -133,7 +135,6 @@
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		padding: 0 0.5rem;
 		font-size: var(--font-size);
-		font-family: inherit;
 	}
 
 	.basename {
@@ -142,7 +143,6 @@
 		margin: 0;
 		padding: 0 1rem 0 calc(1rem + var(--inset));
 		font-size: var(--font-size);
-		font-family: inherit;
 		color: inherit;
 		flex: 1;
 		height: 100%;
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
index bf8b6f915b..51731d78a0 100644
--- a/packages/repl/src/lib/CodeMirror.svelte
+++ b/packages/repl/src/lib/CodeMirror.svelte
@@ -296,7 +296,7 @@
 		.cm-tooltip {
 			border: none;
 			background: var(--sk-back-3);
-			font-family: var(--sk-font);
+			font-family: var(--sk-font-body);
 			max-width: calc(100vw - 10em);
 			position: relative;
 			filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
@@ -369,7 +369,7 @@
 		}
 
 		.cm-diagnostic :not(code) {
-			font-family: var(--sk-font);
+			font-family: var(--sk-font-body);
 		}
 
 		.cm-diagnosticText {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index e317987679..9c8839d348 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: 400 12px/1.5 var(--sk-font);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
 		background: var(--sk-back-1);
 		border: none;
 		border-bottom: 3px solid transparent;
@@ -339,7 +339,7 @@
 		width: 100%;
 		left: 16px;
 		top: 12px;
-		font: 400 12px/1.5 var(--sk-font);
+		font: 400 12px/1.5 var(--sk-font-body);
 		border: none;
 		color: var(--sk-theme-3);
 		outline: none;
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 55392e6070..883f8aa112 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -9,11 +9,13 @@
 </div>
 
 <style>
+	/* TODO this is duplicated with RunesInfo.svelte */
 	button {
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: 1.4rem;
+		font-weight: 300;
+		font-size: var(--sk-text-s);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 3672edc7f6..bb27ae72e7 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -69,7 +69,8 @@
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: 1.4rem;
+		font-weight: 300;
+		font-size: var(--sk-text-s);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index c976784562..d3e2eed274 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -46,7 +46,7 @@
 		position: relative;
 		color: white;
 		padding: 12px 16px 12px 44px;
-		font: 400 12px/1.7 var(--sk-font);
+		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-body);
 		margin: 0;
 		border-top: 1px solid white;
 	}
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 9c676e0cc3..94b6f2746c 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: 400 12px/1.5 var(--sk-font);
+		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
 		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 8cea54e816..971000c302 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,7 +69,8 @@
 	}
 
 	.panel-heading {
-		font: 700 12px/1.5 var(--sk-font);
+		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-heading);
+		text-transform: uppercase;
 		color: var(--sk-text-1, #333);
 		flex: 1;
 		text-align: left;
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 5989826230..dd7f17ecb3 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -300,7 +300,8 @@
 
 	button {
 		color: var(--sk-text-2, #999);
-		font-size: 12px;
+		font-size: var(--sk-text-s);
+		font-family: var(--sk-font-heading);
 		text-transform: uppercase;
 		display: block;
 	}
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 11dba58d3c..74c4dfed5a 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -258,7 +258,7 @@
 
 	.meta {
 		color: var(--sk-text-2, #666);
-		font-family: var(--sk-font) !important;
+		font-family: var(--sk-font-body) !important;
 		font-size: 12px;
 	}
 
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 1088a9a901..0e35cabd23 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -21,6 +21,9 @@
 	},
 	"homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme",
 	"dependencies": {
+		"@fontsource/cardo": "^5.1.0",
+		"@fontsource/fira-mono": "^5.1.0",
+		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
 		"svelte-persisted-store": "^0.9.2"
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 0728fb7707..693a816804 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -46,7 +46,7 @@
 
 	.sidebar {
 		padding: 3.2rem;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		height: 100%;
 		bottom: auto;
 		width: 100%;
@@ -77,17 +77,16 @@
 	.section {
 		display: block;
 		padding-bottom: 0.8rem;
-		font-size: var(--sk-text-s);
-		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		font-weight: 600;
+		font-size: var(--sk-text-m);
+		font-family: var(--sk-font-heading);
+		font-weight: 500;
 		color: var(--sk-text-2);
 	}
 
 	.page {
 		display: block;
 		font-size: 1.6rem;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		padding-bottom: 0.6em;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 5c5b45fc57..fc3ef8fbc3 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -143,11 +143,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		background-color: var(--sk-back-2);
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		user-select: none;
 		transition: 0.4s var(--quint-out);
 		transition-property: transform, background;
 		isolation: isolate;
+		font-family: var(--sk-font-heading);
 	}
 
 	nav::after {
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index e9527f4f9c..5ad348201d 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -77,7 +77,7 @@
 	nav {
 		padding: 0.29rem;
 		padding-top: 0;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		overflow-y: auto;
 
 		height: 100%;
@@ -174,7 +174,7 @@
 		font-size: 1.1rem;
 		font-weight: 600;
 		letter-spacing: 1px;
-		font-family: var(--sk-font);
+		font-family: var(--sk-font-body);
 		line-height: 1;
 		color: var(--sk-theme-1);
 		background: hsla(var(--sk-theme-1-hsl), 0.1);
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 4ea14bc3df..fbcc0c6ed4 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -19,7 +19,7 @@ body {
 
 body {
 	font-size: 1.6rem;
-	font-family: var(--sk-font);
+	font-family: var(--sk-font-body);
 	line-height: 1.618;
 	color: var(--sk-text-2);
 	background-color: var(--sk-back-1);
@@ -84,6 +84,7 @@ h1 {
 
 :where(h1, h2, h3, h4, h5, h6) {
 	position: relative;
+	font-family: var(--sk-font-heading);
 	font-weight: 400;
 	line-height: 1.35;
 	color: var(--sk-text-1);
@@ -146,7 +147,7 @@ blockquote :last-child {
 
 /*  buttons -------------------------------- */
 button {
-	font-family: inherit;
+	font-family: var(--sk-font-heading);
 	font-size: inherit;
 	background-color: transparent;
 	border: none;
diff --git a/packages/site-kit/src/lib/styles/fonts.css b/packages/site-kit/src/lib/styles/fonts.css
deleted file mode 100644
index cdcf95ee0f..0000000000
--- a/packages/site-kit/src/lib/styles/fonts.css
+++ /dev/null
@@ -1,32 +0,0 @@
-@font-face {
-	font-family: 'Overpass';
-	font-style: normal;
-	font-weight: 300;
-	src:
-		local('Overpass Light '),
-		local('Overpass-Light'),
-		url('./fonts/overpass/overpass-latin-300.woff2') format('woff2');
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Overpass';
-	font-style: normal;
-	font-weight: 600;
-	src:
-		local('Overpass Bold '),
-		local('Overpass-Bold'),
-		url('./fonts/overpass/overpass-latin-600.woff2') format('woff2');
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Fira Mono';
-	font-style: normal;
-	font-weight: 400;
-	src:
-		local('Fira Mono Regular '),
-		local('Fira Mono-Regular'),
-		url('./fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2');
-	font-display: swap;
-}
diff --git a/packages/site-kit/src/lib/styles/fonts/fira-mono/fira-mono-latin-400.woff2 b/packages/site-kit/src/lib/styles/fonts/fira-mono/fira-mono-latin-400.woff2
deleted file mode 100644
index e81b9f3c56..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/fira-mono/fira-mono-latin-400.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-100.woff2 b/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-100.woff2
deleted file mode 100644
index a828f98880..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-100.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-300.woff2 b/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-300.woff2
deleted file mode 100644
index 15e204c35e..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-300.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-400.woff2 b/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-400.woff2
deleted file mode 100644
index 8f469bb22e..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-400.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-600.woff2 b/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-600.woff2
deleted file mode 100644
index 1956aca6e0..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-600.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-700.woff2 b/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-700.woff2
deleted file mode 100644
index 14a7f9cce5..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/overpass/overpass-latin-700.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400.woff2 b/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400.woff2
deleted file mode 100644
index 7e854e669b..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400italic.woff2 b/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400italic.woff2
deleted file mode 100644
index 3791c883e8..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-400italic.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500.woff2 b/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500.woff2
deleted file mode 100644
index 8dceabcf6b..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500italic.woff2 b/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500italic.woff2
deleted file mode 100644
index 1b9589945e..0000000000
Binary files a/packages/site-kit/src/lib/styles/fonts/roboto/roboto-latin-500italic.woff2 and /dev/null differ
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index a4c91c8ec2..44b2a249a2 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -1,5 +1,4 @@
 @import './tokens.css';
-@import './fonts.css';
 @import './base.css';
 @import './text.css';
 @import './code.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 598b3c1f56..86e41388b3 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -1,3 +1,13 @@
+@import '@fontsource/cardo';
+@import '@fontsource/fira-mono';
+/* TODO figure out which weights we actually need */
+@import '@fontsource/yantramanav/100.css';
+@import '@fontsource/yantramanav/300.css';
+@import '@fontsource/yantramanav/400.css';
+@import '@fontsource/yantramanav/500.css';
+@import '@fontsource/yantramanav/700.css';
+@import '@fontsource/yantramanav/900.css';
+
 /*
 
 !IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
@@ -22,8 +32,9 @@
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
-	--sk-font: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	--sk-font-heading: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+		Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	--sk-font-body: Cardo, 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
 	--sk-font-mono: 'Fira Mono', monospace;
 	--sk-text-xxl: 3.6rem;
 	--sk-text-xl: 3rem;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bcd223d0dc..9809a6479b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -349,6 +349,15 @@ importers:
 
   packages/site-kit:
     dependencies:
+      '@fontsource/cardo':
+        specifier: ^5.1.0
+        version: 5.1.0
+      '@fontsource/fira-mono':
+        specifier: ^5.1.0
+        version: 5.1.0
+      '@fontsource/yantramanav':
+        specifier: ^5.1.0
+        version: 5.1.0
       esm-env:
         specifier: ^1.0.0
         version: 1.0.0
@@ -790,9 +799,18 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fontsource/cardo@5.1.0':
+    resolution: {integrity: sha512-ylOb2t/CgQV2mNovSVya6r/jC9Q0w3cKHQOO7iycXLHRsgCGF82Oy/Je3GmdoGVKRNF6CDA3pc85Tw1078nQwQ==}
+
+  '@fontsource/fira-mono@5.1.0':
+    resolution: {integrity: sha512-6+nftSKApXyN0I9FC5GJuG5TUCh+in5OehtrXRIsHJvq38Pm//oA1kZZYNdXv99JYzLzJ3lzsTAavmS+xGLGDw==}
+
   '@fontsource/roboto-mono@5.0.18':
     resolution: {integrity: sha512-hKuwk/cy3i6fWPzazT5xjgWq4YNqZWDHVbJh2Wwj3KYvWGi2v3ToBw/4LKQ+ggEkPLcIG6VU8GpCT3Xtf+mbbA==}
 
+  '@fontsource/yantramanav@5.1.0':
+    resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==}
+
   '@img/sharp-darwin-arm64@0.33.4':
     resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==}
     engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'}
@@ -3290,8 +3308,14 @@ snapshots:
   '@esbuild/win32-x64@0.23.1':
     optional: true
 
+  '@fontsource/cardo@5.1.0': {}
+
+  '@fontsource/fira-mono@5.1.0': {}
+
   '@fontsource/roboto-mono@5.0.18': {}
 
+  '@fontsource/yantramanav@5.1.0': {}
+
   '@img/sharp-darwin-arm64@0.33.4':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.2