diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index ea62d87f86..e1e9679e3e 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -23,6 +23,10 @@
JSON.parse(localStorage.getItem('svelte:theme'))?.current ??
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
);
+
+ document.documentElement.classList.add(
+ `font-${localStorage.getItem('svelte:font') ?? 'elegant'}`
+ );
%sveltekit.head%
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index ec5fc47913..f85ef40a32 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -149,6 +149,7 @@
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
+ font: var(--sk-font-ui-small);
/* fake border (allows tab borders to appear above it) */
&::before {
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 9ede0b81ba..f101cc0a24 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -22,7 +22,6 @@
},
"homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme",
"dependencies": {
- "@lezer/common": "^1.0.4",
"@codemirror/autocomplete": "^6.9.0",
"@codemirror/commands": "^6.2.5",
"@codemirror/lang-css": "^6.2.1",
@@ -33,16 +32,18 @@
"@codemirror/search": "^6.5.2",
"@codemirror/state": "^6.2.1",
"@codemirror/view": "^6.17.1",
+ "@fontsource/atkinson-hyperlegible": "^5.1.0",
"@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",
+ "@lezer/common": "^1.0.4",
+ "@replit/codemirror-lang-svelte": "^6.0.0",
"@shikijs/twoslash": "^1.22.0",
"esm-env": "^1.0.0",
"json5": "^2.2.3",
"shiki": "^1.22.0",
- "svelte-persisted-store": "^0.9.2",
- "@replit/codemirror-lang-svelte": "^6.0.0"
+ "svelte-persisted-store": "^0.9.2"
},
"devDependencies": {
"@sveltejs/kit": "^2.6.3",
diff --git a/packages/site-kit/src/lib/components/FontToggle.svelte b/packages/site-kit/src/lib/components/FontToggle.svelte
new file mode 100644
index 0000000000..076372bbbf
--- /dev/null
+++ b/packages/site-kit/src/lib/components/FontToggle.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
diff --git a/packages/site-kit/src/lib/components/Icons.svelte b/packages/site-kit/src/lib/components/Icons.svelte
index f1cf8a5a8c..efd2981cd1 100644
--- a/packages/site-kit/src/lib/components/Icons.svelte
+++ b/packages/site-kit/src/lib/components/Icons.svelte
@@ -195,5 +195,14 @@ Provides a list of svg icons that can be referenced through the `Icon` component
d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"
/>
+
+
+
+
+
+
+
+
+
diff --git a/packages/site-kit/src/lib/icons/font-accessible-dark.svg b/packages/site-kit/src/lib/icons/font-accessible-dark.svg
new file mode 100644
index 0000000000..f879017524
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-accessible-dark.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/icons/font-accessible-light.svg b/packages/site-kit/src/lib/icons/font-accessible-light.svg
new file mode 100644
index 0000000000..745a87f96e
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-accessible-light.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/icons/font-boring-dark.svg b/packages/site-kit/src/lib/icons/font-boring-dark.svg
new file mode 100644
index 0000000000..38abc6491a
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-boring-dark.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/icons/font-boring-light.svg b/packages/site-kit/src/lib/icons/font-boring-light.svg
new file mode 100644
index 0000000000..509e00e1fd
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-boring-light.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/icons/font-elegant-dark.svg b/packages/site-kit/src/lib/icons/font-elegant-dark.svg
new file mode 100644
index 0000000000..a48fabd407
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-elegant-dark.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/icons/font-elegant-light.svg b/packages/site-kit/src/lib/icons/font-elegant-light.svg
new file mode 100644
index 0000000000..d9bc61daab
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/font-elegant-light.svg
@@ -0,0 +1 @@
+
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 8dd1d77866..7537643bb9 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
import { HoverMenu } from '../components';
import Search from '../search/Search.svelte';
import { tick } from 'svelte';
+ import FontToggle from '../components/FontToggle.svelte';
interface Props {
home_title?: string;
@@ -130,6 +131,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
>
+
+
@@ -142,9 +145,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
$searching = true;
}}
>
-
+
+
+