feat: use new font (#133)

Author: zaucy

src/main.html

@@ -8,16 +8,13 @@
 		<meta name="mobile-web-app-capable" content="yes" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans+Condensed:ital,wght@0,400;0,600;1,400;1,600&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
+			rel="stylesheet" />
 		<link
 			rel="icon"
 			type="image/png"
 			href="/external/ecsact_logo/ecsact-color.png" />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;700&display=swap"
-			rel="stylesheet" />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Raleway&family=Titillium+Web:wght@400;700&display=swap"
-			rel="stylesheet" />
 		<link
 			rel="stylesheet"
 			href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block" />

src/styles.tailwind.css

@@ -1,18 +1,26 @@
 @tailwind base;
 
 @layer base {
+	html {
+		@apply font-body;
+	}
+
 	h1 {
-		@apply text-3xl mt-2 mb-4 font-bold;
+		@apply text-3xl mt-2 mb-4 font-header;
 	}
+
 	h2 {
-		@apply text-2xl mt-2 mb-4 font-bold;
+		@apply text-2xl mt-2 mb-4 font-header;
 	}
+
 	h3 {
-		@apply text-xl mt-2 mb-4 font-bold;
+		@apply text-xl mt-2 mb-4 font-header;
 	}
+
 	h4 {
-		@apply text-lg mt-2 mb-4 font-bold;
+		@apply text-lg mt-2 mb-4 font-header;
 	}
+
 	p {
 		@apply mt-2 mb-4;
 	}

src/tailwind.config.js

@@ -79,9 +79,9 @@ module.exports = {
 			},
 		},
 		fontFamily: {
-			sans: ['Raleway', 'ui-sans-serif', 'system-ui'],
-			serif: ['Raleway', 'ui-serif', 'sans-serif'],
-			mono: ["'Noto Sans Mono'", 'ui-monospace', 'SFMono-Regular', 'monospace'],
+			body: ['Nunito Sans', 'ui-sans-serif', 'system-ui'],
+			header: ['Fira Sans Condensed', 'ui-serif', 'sans-serif'],
+			mono: ["'Fira Code'", 'ui-monospace', 'SFMono-Regular', 'monospace'],
 		},
 		colors: {
 			primary: {