diff --git a/packages/guide/src/layouts/SidebarLayout.astro b/packages/guide/src/layouts/SidebarLayout.astro
index ba9024df0..fd1832393 100644
--- a/packages/guide/src/layouts/SidebarLayout.astro
+++ b/packages/guide/src/layouts/SidebarLayout.astro
@@ -1,4 +1,5 @@
 ---
+import '../styles/main.css';
 import '@code-hike/mdx/styles.css';
 import '../styles/ch.css';
 import type { MarkdownLayoutProps } from 'astro';
diff --git a/packages/guide/src/styles/main.css b/packages/guide/src/styles/main.css
new file mode 100644
index 000000000..3c1111412
--- /dev/null
+++ b/packages/guide/src/styles/main.css
@@ -0,0 +1,16 @@
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+		'Noto Color Emoji';
+	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+@supports (font-variation-settings: normal) {
+	:root {
+		font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+			'Noto Color Emoji';
+	}
+}
diff --git a/packages/ui/src/lib/components/discord/Messages.tsx b/packages/ui/src/lib/components/discord/Messages.tsx
index 4e0f0f48b..0521781f9 100644
--- a/packages/ui/src/lib/components/discord/Messages.tsx
+++ b/packages/ui/src/lib/components/discord/Messages.tsx
@@ -2,7 +2,10 @@ import type { PropsWithChildren } from 'react';
 
 export function DiscordMessages({ rounded, children }: PropsWithChildren<{ rounded?: boolean }>) {
 	return (
-		<div className={`pt-0.1 bg-[rgb(54_57_63)] pb-4 ${rounded ? 'rounded' : ''}`} id="messages-wrapper">
+		<div
+			className={`font-source-sans-pro pt-0.1 bg-[rgb(54_57_63)] pb-4 ${rounded ? 'rounded' : ''}`}
+			id="messages-wrapper"
+		>
 			{children}
 		</div>
 	);
diff --git a/packages/ui/unocss.config.ts b/packages/ui/unocss.config.ts
index c99406d78..55b601c4f 100644
--- a/packages/ui/unocss.config.ts
+++ b/packages/ui/unocss.config.ts
@@ -22,7 +22,23 @@ export default defineConfig({
 		presetWebFonts({
 			provider: 'bunny',
 			fonts: {
-				mono: ['JetBrains Mono', 'JetBrains Mono:400,600,700'],
+				mono: ['JetBrains Mono:400,600,700'],
+				'source-sans-pro': [
+					'Source Sans Pro:300,400,500,600',
+					{ name: 'ui-sans-serif', provider: 'none' },
+					{ name: 'system-ui', provider: 'none' },
+					{ name: '-apple-system', provider: 'none' },
+					{ name: 'BlinkMacSystemFont', provider: 'none' },
+					{ name: 'Segoe UI', provider: 'none' },
+					{ name: 'Roboto', provider: 'none' },
+					{ name: 'Helvetica Neue', provider: 'none' },
+					{ name: 'Arial', provider: 'none' },
+					{ name: 'sans-serif', provider: 'none' },
+					{ name: 'Apple Color Emoji', provider: 'none' },
+					{ name: 'Segoe UI Emoji', provider: 'none' },
+					{ name: 'Segoe UI Symbol', provider: 'none' },
+					{ name: 'Noto Color Emoji', provider: 'none' },
+				],
 			},
 		}),
 		presetTypography({
diff --git a/packages/website/package.json b/packages/website/package.json
index 281c73953..852f814ce 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -13,7 +13,7 @@
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
 		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' '../ui/src/**/*.tsx' --out-file ./src/styles/unocss.css --config ../ui/unocss.config.ts",
+		"generate:css": "unocss 'src/**/*.tsx' '../ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../ui/unocss.config.ts",
 		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
 		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix"
 	},
diff --git a/packages/website/src/styles/main.css b/packages/website/src/styles/main.css
index 920531947..6218f88f7 100644
--- a/packages/website/src/styles/main.css
+++ b/packages/website/src/styles/main.css
@@ -1,13 +1,16 @@
 @import url('https://rsms.me/inter/inter.css');
 
 :root {
-	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue;
+	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+		'Noto Color Emoji';
 	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
 }
 
 @supports (font-variation-settings: normal) {
 	:root {
-		font-family: 'Inter var', Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
+		font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
 			'Noto Color Emoji';
 	}
 }