fonts

Author: Rich-Harris

apps/svelte.dev/src/app.html

@@ -23,6 +23,35 @@
 				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'
+			];
+
+			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);
 		</script>
 
 		%sveltekit.head%

packages/site-kit/package.json

@@ -37,6 +37,13 @@
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
 		"@fontsource/fira-sans": "^5.1.0",
+		"@fontsource/cardo": "^5.1.0",
+		"@fontsource/crimson-pro": "^5.1.0",
+		"@fontsource/newsreader": "^5.1.0",
+		"@fontsource/noto-serif": "^5.1.0",
+		"@fontsource/petrona": "^5.1.0",
+		"@fontsource/scope-one": "^5.1.0",
+		"@fontsource/source-serif-4": "^5.1.0",
 		"@shikijs/twoslash": "^1.22.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",

packages/site-kit/src/lib/styles/fonts.css

@@ -0,0 +1,50 @@
+@import '@fontsource/cardo';
+@import '@fontsource/crimson-pro';
+@import '@fontsource/newsreader';
+@import '@fontsource/noto-serif';
+@import '@fontsource/petrona';
+@import '@fontsource/scope-one';
+@import '@fontsource/source-serif-4';
+
+: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;
+	}
+}

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

packages/site-kit/src/lib/styles/tokens.css

@@ -39,11 +39,15 @@
 	--sk-font-size-ui-large: 3rem;
 	--sk-font-size-mono: 1.4rem;
 
+	--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: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
+		var(--sk-font-family-body);
+	--sk-font-body-small: 400 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);