diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html
index ea62d87f86..0f3569b45b 100644
--- a/apps/svelte.dev/src/app.html
+++ b/apps/svelte.dev/src/app.html
@@ -23,6 +23,41 @@
JSON.parse(localStorage.getItem('svelte:theme'))?.current ??
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
);
+
+ window.fonts = [
+ 'cardo',
+ 'crimson-pro',
+ 'newsreader',
+ 'noto-serif',
+ 'petrona',
+ 'scope-one',
+ 'source-serif-4',
+ 'pt-serif',
+ 'gelasio',
+ 'halant',
+ 'amethysta',
+ 'lora',
+ 'maitree'
+ ];
+
+ window.set_font = (font) => {
+ for (const font of window.fonts) {
+ document.documentElement.classList.remove(`font-${font}`);
+ }
+
+ if (font) {
+ document.documentElement.classList.add(`font-${font}`);
+ }
+
+ localStorage.setItem('font', font);
+ };
+
+ if (localStorage.font) {
+ document.documentElement.classList.add(`font-${localStorage.font}`);
+ }
+
+ const font = new URLSearchParams(location.search).get('font');
+ if (font) set_font(font);
%sveltekit.head%
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 9ede0b81ba..985dd92223 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,30 @@
"@codemirror/search": "^6.5.2",
"@codemirror/state": "^6.2.1",
"@codemirror/view": "^6.17.1",
+ "@fontsource/amethysta": "^5.1.0",
+ "@fontsource/cardo": "^5.1.0",
+ "@fontsource/crimson-pro": "^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",
+ "@fontsource/gelasio": "^5.1.0",
+ "@fontsource/halant": "^5.1.0",
+ "@fontsource/lora": "^5.1.0",
+ "@fontsource/maitree": "^5.1.0",
+ "@fontsource/newsreader": "^5.1.0",
+ "@fontsource/noto-serif": "^5.1.0",
+ "@fontsource/petrona": "^5.1.0",
+ "@fontsource/pt-serif": "^5.1.0",
+ "@fontsource/scope-one": "^5.1.0",
+ "@fontsource/source-serif-4": "^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/styles/fonts.css b/packages/site-kit/src/lib/styles/fonts.css
new file mode 100644
index 0000000000..d5e6e5dbed
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/fonts.css
@@ -0,0 +1,95 @@
+@import '@fontsource/cardo/400.css';
+@import '@fontsource/cardo/400-italic.css';
+@import '@fontsource/crimson-pro/400.css';
+@import '@fontsource/crimson-pro/400-italic.css';
+@import '@fontsource/newsreader/400.css';
+@import '@fontsource/newsreader/400-italic.css';
+@import '@fontsource/noto-serif/400.css';
+@import '@fontsource/noto-serif/400-italic.css';
+@import '@fontsource/petrona/400.css';
+@import '@fontsource/petrona/400-italic.css';
+@import '@fontsource/scope-one/400.css';
+@import '@fontsource/source-serif-4/400.css';
+@import '@fontsource/source-serif-4/400-italic.css';
+
+@import '@fontsource/pt-serif/400.css';
+@import '@fontsource/pt-serif/400-italic.css';
+@import '@fontsource/gelasio/400.css';
+@import '@fontsource/gelasio/400-italic.css';
+@import '@fontsource/halant/400.css';
+@import '@fontsource/amethysta/400.css';
+@import '@fontsource/lora/400.css';
+@import '@fontsource/lora/400-italic.css';
+@import '@fontsource/maitree/400.css';
+
+:root {
+ &.font-cardo {
+ --sk-font-family-body: Cardo;
+ --sk-font-size-body: 2rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+
+ &.font-crimson-pro {
+ --sk-font-family-body: 'Crimson Pro';
+ }
+
+ &.font-newsreader {
+ --sk-font-family-body: Newsreader;
+ --sk-font-size-body: 2rem;
+ --sk-font-size-body-small: 1.7rem;
+ --sk-line-height-body: 1.6;
+ }
+
+ &.font-noto-serif {
+ --sk-font-family-body: 'Noto Serif';
+ --sk-font-size-body: 2rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+
+ &.font-petrona {
+ --sk-font-family-body: Petrona;
+ --sk-font-size-body: 2rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+
+ &.font-scope-one {
+ --sk-font-family-body: 'Scope One';
+ --sk-font-size-body: 2rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+
+ &.font-source-serif-4 {
+ --sk-font-family-body: 'Source Serif 4';
+ --sk-font-size-body: 1.9rem;
+ --sk-font-size-body-small: 1.6rem;
+ --sk-font-weight-body: 400;
+ }
+
+ &.font-pt-serif {
+ --sk-font-family-body: 'PT Serif';
+ }
+
+ &.font-gelasio {
+ --sk-font-family-body: 'Gelasio';
+ }
+
+ &.font-halant {
+ --sk-font-family-body: 'Halant';
+ }
+
+ &.font-amethysta {
+ --sk-font-family-body: 'Amethysta';
+ }
+
+ &.font-lora {
+ --sk-font-family-body: 'Lora';
+ --sk-font-size-body: 1.8rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+
+ &.font-maitree {
+ --sk-font-family-body: 'Maitree';
+ --sk-font-size-body: 1.8rem;
+ --sk-font-size-body-small: 1.7rem;
+ }
+}
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index a0a925c9e4..3db9014b6d 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -12,3 +12,5 @@
@import './utils/buttons.css';
@import './utils/dividers.css';
@import './utils/twoslash.css';
+
+@import './fonts.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 02d0a2f70d..b8753bb19a 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -39,11 +39,16 @@
--sk-font-size-ui-large: 3rem;
--sk-font-size-mono: 1.4rem;
+ --sk-font-weight-body: 400;
+ --sk-line-height-body: 1.5;
+
--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
- --sk-font-body: 400 var(--sk-font-size-body) / 1.5 var(--sk-font-family-body);
- --sk-font-body-small: 400 var(--sk-font-size-body-small) / 1.5 var(--sk-font-family-body);
+ --sk-font-body: var(--sk-font-weight-body) var(--sk-font-size-body) / var(--sk-line-height-body)
+ var(--sk-font-family-body);
+ --sk-font-body-small: var(--sk-font-weight-body) var(--sk-font-size-body-small) /
+ var(--sk-line-height-body) var(--sk-font-family-body);
--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63bacd8a75..3b2538eb90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -428,6 +428,15 @@ importers:
'@codemirror/view':
specifier: ^6.17.1
version: 6.34.1
+ '@fontsource/amethysta':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/cardo':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/crimson-pro':
+ specifier: ^5.1.0
+ version: 5.1.0
'@fontsource/dm-serif-display':
specifier: ^5.1.0
version: 5.1.0
@@ -440,6 +449,36 @@ importers:
'@fontsource/fira-sans':
specifier: ^5.1.0
version: 5.1.0
+ '@fontsource/gelasio':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/halant':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/lora':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/maitree':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/newsreader':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/noto-serif':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/petrona':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/pt-serif':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/scope-one':
+ specifier: ^5.1.0
+ version: 5.1.0
+ '@fontsource/source-serif-4':
+ specifier: ^5.1.0
+ version: 5.1.0
'@lezer/common':
specifier: ^1.0.4
version: 1.2.2
@@ -899,6 +938,15 @@ packages:
cpu: [x64]
os: [win32]
+ '@fontsource/amethysta@5.1.0':
+ resolution: {integrity: sha512-Zj8kJTQMLzbjzzxc5GKpIznvGD8UH/q5NJGYUnd3riKfCbgtTM6EfhMW2rwV1I3TlluE88glIac3a46gahJ1Jg==}
+
+ '@fontsource/cardo@5.1.0':
+ resolution: {integrity: sha512-ylOb2t/CgQV2mNovSVya6r/jC9Q0w3cKHQOO7iycXLHRsgCGF82Oy/Je3GmdoGVKRNF6CDA3pc85Tw1078nQwQ==}
+
+ '@fontsource/crimson-pro@5.1.0':
+ resolution: {integrity: sha512-YWWa5CJNH+b48VfD57+hf6OUaChAkGMR083Xp7HXnUfIbSRenn8QqM4q9AiU5QrVDZcBeCHrpU3tDLdCnVAnsg==}
+
'@fontsource/dm-serif-display@5.1.0':
resolution: {integrity: sha512-8IGBpTOn2XRA09plE6iAlZajL09iwCdSTd60FiM9NsD7VV4Nqseo9tgqiZLyuLC9D1jht5i39I2IYI/o2+Q0Kg==}
@@ -911,6 +959,36 @@ packages:
'@fontsource/fira-sans@5.1.0':
resolution: {integrity: sha512-qfAjF5WcrL6qQh9eIWLK7lOh9wbCgCnVWh2Nu2gozrTgsUgYBLR8sbCGYwlK1K0yZoQsR2i9VSiQ16wwPCBkSw==}
+ '@fontsource/gelasio@5.1.0':
+ resolution: {integrity: sha512-wnG7L68olCnCTV7j1kWKS9vy3bOkQlgaq88sTdvrcZr2LZHxAHPrOR0ebHWpuz1IqPvgvon/iGGRxccwecpebg==}
+
+ '@fontsource/halant@5.1.0':
+ resolution: {integrity: sha512-oK2L8NRpnqsFgOztiGLQ+ezgfILPPzxsEjR0WKXWuf+LqFcbpmpVtEV5q+yzML2iJgjRF9DtSBt93JgJ8x2GWA==}
+
+ '@fontsource/lora@5.1.0':
+ resolution: {integrity: sha512-kHhtKc/ETrNN0X+TsfSAqeE/WQcazkSa97Sxzkg/Uo2rZ+O3kCts595Cmu116O5gw4z0Bc37voD67rEA6iRv/w==}
+
+ '@fontsource/maitree@5.1.0':
+ resolution: {integrity: sha512-sJgOlbaqiB58NH8fsS2FfLt+5fr4yKNQz2+DTTHc+2VX53RZ/0ArLb4gm0RxVz0FSjIzhFM42dHnwiwSRpbZmA==}
+
+ '@fontsource/newsreader@5.1.0':
+ resolution: {integrity: sha512-wBq4mtWkq7dM0hCQ58DGyTdnmNiNiC69amo/+/oGRDQxyLMR9QNWng+nGH/BZJne/l5i3CiK7UhxIU1FrcU/Og==}
+
+ '@fontsource/noto-serif@5.1.0':
+ resolution: {integrity: sha512-C/rancPr6kcRGNAut7g8CAZNhB1kOWB6VRQDCo6ZoUnW2Mja962ZcrU0nD7nFeSMJiSeyX5phCrajMaUJE3SGg==}
+
+ '@fontsource/petrona@5.1.0':
+ resolution: {integrity: sha512-8Q8WYMnRH700Y1ZgBDkJ17zZ/abZHU2u+H4hLEnJJYCjKxNY5/gDWR/0FaUNSYCM/u9CAn6IHQEUjrvVvdYW8Q==}
+
+ '@fontsource/pt-serif@5.1.0':
+ resolution: {integrity: sha512-ehu4JaYBu8+gfsPAo1vpi7KN+JPm10mNRUwm9ehR5g+LlVWWxnXomFPkBe7OA0BHnljSsjLohs0OuCC37KAXrw==}
+
+ '@fontsource/scope-one@5.1.0':
+ resolution: {integrity: sha512-+nfvn/pKq3+LheaapNQSdwMvtKMB2HGO6T4G//ec8Ltvvn8tKKOfjRn5RFDq18k+YcBoSpTjIZI2wrNMbZuu9w==}
+
+ '@fontsource/source-serif-4@5.1.0':
+ resolution: {integrity: sha512-QhUshnNeb8TRUi2s1NH/UFOnRbY2LDejtIy//VHcG9w2dAwkMxAYIwuNplG0zpkcYiME8tzev0xNkbiSeuEtjw==}
+
'@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'}
@@ -3641,6 +3719,12 @@ snapshots:
'@esbuild/win32-x64@0.23.1':
optional: true
+ '@fontsource/amethysta@5.1.0': {}
+
+ '@fontsource/cardo@5.1.0': {}
+
+ '@fontsource/crimson-pro@5.1.0': {}
+
'@fontsource/dm-serif-display@5.1.0': {}
'@fontsource/eb-garamond@5.1.0': {}
@@ -3649,6 +3733,26 @@ snapshots:
'@fontsource/fira-sans@5.1.0': {}
+ '@fontsource/gelasio@5.1.0': {}
+
+ '@fontsource/halant@5.1.0': {}
+
+ '@fontsource/lora@5.1.0': {}
+
+ '@fontsource/maitree@5.1.0': {}
+
+ '@fontsource/newsreader@5.1.0': {}
+
+ '@fontsource/noto-serif@5.1.0': {}
+
+ '@fontsource/petrona@5.1.0': {}
+
+ '@fontsource/pt-serif@5.1.0': {}
+
+ '@fontsource/scope-one@5.1.0': {}
+
+ '@fontsource/source-serif-4@5.1.0': {}
+
'@img/sharp-darwin-arm64@0.33.4':
optionalDependencies:
'@img/sharp-libvips-darwin-arm64': 1.0.2