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 2c91d7ba63..7f358979c3 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -317,6 +317,7 @@ export default app;`
 		margin: 0 0.2em 0 0.4rem;
 		padding-top: 0.2em;
 		border-bottom: 1px solid transparent;
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	input:hover {
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 9421db3bc8..1d0a5039fc 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -94,7 +94,7 @@
 		background: var(--sk-theme-1);
 		padding: 0.35em 0.8em;
 		font-family: var(--sk-font-ui);
-		letter-spacing: 0.05em;
+		font-size: var(--sk-font-size-ui-medium);
 		font-weight: 600;
 		white-space: nowrap;
 		border-radius: var(--sk-border-radius);
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
index cbf4ca08a6..a3abd98f1c 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -5,7 +5,8 @@ import { read } from '$app/server';
 import satori from 'satori';
 import { html as toReactNode } from 'satori-html';
 import Card from './Card.svelte';
-import YantramanavRegular from './Yantramanav-Regular.ttf?url';
+import DMSerifDisplay from './DMSerifDisplay-Regular.ttf?url';
+import FiraSans from './FiraSans-Regular.ttf?url';
 import { blog_posts } from '$lib/server/content';
 
 export const prerender = true;
@@ -18,7 +19,8 @@ export function entries() {
 
 const height = 630;
 const width = 1200;
-const data = await read(YantramanavRegular).arrayBuffer();
+const dm_serif_display = await read(DMSerifDisplay).arrayBuffer();
+const fira_sans = await read(FiraSans).arrayBuffer();
 
 export async function GET({ params }) {
 	const post = blog_posts.find((post) => post.slug === `blog/${params.slug}`);
@@ -31,8 +33,14 @@ export async function GET({ params }) {
 	const svg = await satori(element, {
 		fonts: [
 			{
-				name: 'Overpass',
-				data,
+				name: 'DMSerif Display',
+				data: dm_serif_display,
+				style: 'normal',
+				weight: 400
+			},
+			{
+				name: 'Fira Sans',
+				data: fira_sans,
 				style: 'normal',
 				weight: 400
 			}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
index 1ff8091fc5..41da9a27d9 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
@@ -18,7 +18,6 @@
 		display: flex;
 		width: 100%;
 		height: 100%;
-		font-family: 'Yantramanav';
 		background: white;
 	}
 
@@ -49,6 +48,7 @@
 		font-weight: 400;
 		line-height: 80px;
 		margin: 0 0 0.5em 0;
+		font-family: 'DM Serif Display';
 	}
 
 	.date {
@@ -56,5 +56,6 @@
 		margin: 0;
 		color: #555;
 		text-transform: uppercase;
+		font-family: 'Fira Sans';
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/DMSerifDisplay-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/DMSerifDisplay-Regular.ttf
new file mode 100644
index 0000000000..65a57b7c15
Binary files /dev/null and b/apps/svelte.dev/src/routes/blog/[slug]/card.png/DMSerifDisplay-Regular.ttf differ
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/FiraSans-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/FiraSans-Regular.ttf
new file mode 100644
index 0000000000..6f80647494
Binary files /dev/null and b/apps/svelte.dev/src/routes/blog/[slug]/card.png/FiraSans-Regular.ttf differ
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Overpass-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Overpass-Regular.ttf
deleted file mode 100644
index 3b32102d83..0000000000
Binary files a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Overpass-Regular.ttf and /dev/null differ
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf
deleted file mode 100644
index d7e4c6657f..0000000000
Binary files a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf and /dev/null differ
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index c267e6ac02..14aabaa9a0 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -86,4 +86,8 @@
 			max-width: 50rem;
 		}
 	}
+
+	a {
+		font-size: var(--sk-font-size-body-small);
+	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 6f22526df5..a36f9eaa08 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -115,6 +115,10 @@
 		color: var(--sk-text-3);
 	}
 
+	.controls a {
+		font-size: var(--sk-font-size-body-small);
+	}
+
 	.controls span.faded {
 		opacity: 0.4;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
index f495c0572f..e049b191a7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/+page.svelte
@@ -395,6 +395,7 @@
 		border-right: 1px solid var(--sk-back-4);
 		color: white;
 		opacity: 1;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	.navigator .solve:disabled {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
index 7d74155ae5..70d25468ef 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -162,10 +162,12 @@
 	h2 {
 		font-family: var(--sk-font-ui);
 		font-size: var(--sk-font-size-ui-large);
+		margin: 0 0 0.5em 0;
 	}
 
 	p {
 		margin: 0 0 1em 0;
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	button {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index 03671f8285..756b126955 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -193,11 +193,9 @@
 	header strong,
 	h1 {
 		font-family: inherit;
-		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.menu {
-		font-size: var(--sk-font-size-ui-medium);
 		border: none;
 	}
 
@@ -252,7 +250,7 @@
 		text-overflow: ellipsis;
 		text-align: center;
 		color: var(--sk-text-2);
-		font-weight: 400;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	h1 .desktop {
@@ -452,10 +450,5 @@
 			font-size: var(--sk-font-size-ui-small);
 			color: var(--sk-text-3);
 		}
-
-		h1 strong {
-			font-size: var(--sk-font-size-ui-medium) !important;
-			line-height: 1;
-		}
 	}
 </style>
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 1d1d3c88c6..ac603dfceb 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: var(--sk-font-size-ui-medium);
+		--font-size: var(--sk-font-size-ui-small);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 1b001dd3b4..b2bf09c16a 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -25,6 +25,7 @@
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
+		"@fontsource/fira-sans": "^5.1.0",
 		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index fe96d5df45..ece7c61b13 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -43,6 +43,7 @@
 <style>
 	footer {
 		max-width: 120rem;
+		font-size: var(--sk-font-size-body-small);
 		padding: 0 var(--sk-page-padding-side);
 		margin: 0 auto;
 		display: grid;
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 6d9e3ef151..691dd69dff 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -67,11 +67,11 @@
 
 	.copy {
 		text-align: left;
+		font-size: var(--sk-font-size-body);
 	}
 
 	h2 {
 		display: inline-block;
-		width: 25rem;
 		margin: 0 0 1rem;
 	}
 
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index 882c845a54..31ab6652ef 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -54,6 +54,7 @@
 	}
 
 	.terminal pre {
+		font-size: var(--sk-font-size-code);
 		padding: 1em;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index 2682121958..99ec67c5a4 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -396,6 +396,7 @@
 		margin: 0.3rem 0;
 		height: 4rem;
 		color: var(--sk-text-2);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.universal .contents,
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 0787391c1c..14d6d67c56 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -159,13 +159,17 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 	}
 
+	a {
+		font-size: var(--sk-font-size-ui-medium);
+	}
+
 	.current-section {
 		display: flex;
 		align-items: center;
-		font-size: 0.8em;
 		color: var(--sk-text-3);
 		margin-left: 0.4em;
 		padding: 0.1rem 0 0 0;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	@media (max-width: 800px) {
@@ -183,6 +187,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.menu :global(a) {
 		color: var(--sk-text-2);
 		line-height: 1;
+		font-size: var(--sk-font-size-ui-medium);
 		padding: 0.1rem 0.5rem 0 0.5rem;
 		white-space: nowrap;
 		height: 100%;
@@ -281,6 +286,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		.appearance .caption {
 			display: block;
+			font-size: var(--sk-font-size-ui-medium);
 		}
 
 		nav :global(.large) {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index de7fbe9740..4434987624 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -18,7 +18,6 @@ body {
 }
 
 body {
-	font-size: var(--sk-font-size-body-small);
 	font-family: var(--sk-font-body);
 	line-height: 1.5;
 	color: var(--sk-text-2);
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index 29a3f2ead8..f45a8cdd34 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -4,6 +4,7 @@
 @import '@fontsource/dm-serif-display';
 @import '@fontsource/yantramanav/400.css';
 @import '@fontsource/fira-mono';
+@import '@fontsource/fira-sans';
 
 @import './tokens.css';
 @import './base.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 4e500d77ae..f5ce257805 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,10 +22,9 @@
 	--sk-banner-bottom-height: 0px;
 
 	/* typography */
-	--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: 'DM Serif Display';
+	--sk-font-ui: 'Fira Sans', -apple-system, sans-serif;
+	--sk-font-body: 'EB Garamond', Georgia, serif;
+	--sk-font-heading: 'DM Serif Display', Georgia, serif;
 	--sk-font-mono: 'Fira Mono', monospace;
 
 	--sk-font-size-h1: 3.6rem;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1508ee351..3cdc4c660e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -355,6 +355,9 @@ importers:
       '@fontsource/fira-mono':
         specifier: ^5.1.0
         version: 5.1.0
+      '@fontsource/fira-sans':
+        specifier: ^5.1.0
+        version: 5.1.0
       '@fontsource/yantramanav':
         specifier: ^5.1.0
         version: 5.1.0
@@ -808,6 +811,9 @@ packages:
   '@fontsource/fira-mono@5.1.0':
     resolution: {integrity: sha512-6+nftSKApXyN0I9FC5GJuG5TUCh+in5OehtrXRIsHJvq38Pm//oA1kZZYNdXv99JYzLzJ3lzsTAavmS+xGLGDw==}
 
+  '@fontsource/fira-sans@5.1.0':
+    resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==}
+
   '@fontsource/yantramanav@5.1.0':
     resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==}
 
@@ -3312,6 +3318,8 @@ snapshots:
 
   '@fontsource/fira-mono@5.1.0': {}
 
+  '@fontsource/fira-sans@5.1.0': {}
+
   '@fontsource/yantramanav@5.1.0': {}
 
   '@img/sharp-darwin-arm64@0.33.4':