use EB Garamond for headers as well

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;

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;
 	}
 

apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -53,7 +53,7 @@
 
 	h1 {
 		font-size: 4rem;
-		font-weight: 400;
+		font-weight: 500;
 	}
 
 	.standfirst {

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);
 	}
 

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;

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 {

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);

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);
 	}
 

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;

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;

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;

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;
 	}

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 {

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;

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';
 

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;