fix: fonts (#786)

apps/www/package.json

@@ -65,6 +65,7 @@
 		"svelte-check": "^3.6.4",
 		"svelte-radix": "^1.0.1",
 		"sveltekit-superforms": "^2.3.0",
+		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.6.2",
@@ -94,7 +95,6 @@
 		"svelte-legos": "^0.2.2",
 		"svelte-local-storage-store": "^0.5.0",
 		"svelte-sonner": "^0.3.9",
-		"tailwind-merge": "^1.14.0",
 		"vaul-svelte": "^0.0.6"
 	}
 }

apps/www/src/routes/+page.svelte

@@ -11,7 +11,7 @@
 	<PageHeader.Root class="pb-8">
 		<Announcement />
 		<PageHeader.Heading>Build your component library</PageHeader.Heading>
-		<PageHeader.Description>
+		<PageHeader.Description class="text-muted-foreground">
 			Beautifully designed components that you can copy and paste into your apps. Accessible.
 			Customizable. Open Source.
 		</PageHeader.Description>

apps/www/src/styles/globals.css

@@ -4,8 +4,6 @@
 
 @layer base {
 	:root {
-		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
 
@@ -70,18 +68,20 @@
 	}
 }
 @layer base {
+	@font-face {
+		font-family: "geist-sans";
+		src: url("/fonts/Geist/geist.woff2") format("woff2");
+		font-display: swap;
+	}
+
 	* {
 		@apply border-border;
 	}
-	html {
-		-webkit-text-size-adjust: 100%;
-		font-variation-settings: normal;
-	}
 	body {
 		@apply bg-background text-foreground;
-		font-feature-settings:
-			"rlig" 1,
-			"calt" 1;
+		/* font-feature-settings: "rlig" 1, "calt" 1; */
+		font-synthesis-weight: none;
+		text-rendering: optimizeLegibility;
 	}
 
 	/* Mobile tap highlight */
@@ -92,38 +92,6 @@
 
 	/* Font face Geist font */
 
-	@font-face {
-		font-family: "geist-sans";
-		font-style: normal;
-		font-weight: 400;
-		font-display: swap;
-		src: url("/fonts/Geist/Geist-Regular.woff2") format("woff2");
-	}
-
-	@font-face {
-		font-family: "geist-sans";
-		font-style: normal;
-		font-weight: 500;
-		font-display: swap;
-		src: url("/fonts/Geist/Geist-Medium.woff2") format("woff2");
-	}
-
-	@font-face {
-		font-family: "geist-sans";
-		font-style: normal;
-		font-weight: 600;
-		font-display: swap;
-		src: url("/fonts/Geist/Geist-SemiBold.woff2") format("woff2");
-	}
-
-	@font-face {
-		font-family: "geist-sans";
-		font-style: normal;
-		font-weight: 700;
-		font-display: swap;
-		src: url("/fonts/Geist/Geist-Bold.woff2") format("woff2");
-	}
-
 	/* === Scrollbars === */
 
 	::-webkit-scrollbar {
@@ -156,7 +124,6 @@
 		-ms-overflow-style: none;
 		scrollbar-width: none;
 	}
-
 	.antialised {
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;

apps/www/tailwind.config.js

@@ -55,7 +55,7 @@ const config = {
 				sm: "calc(var(--radius) - 4px)",
 			},
 			fontFamily: {
-				sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+				sans: ["geist-sans", ...fontFamily.sans],
 			},
 		},
 	},