feat: set brand font

src/components/header.tsx

@@ -67,17 +67,17 @@ export function Header() {
   return (
     <>
       <span className="flex">
-        <Link to="/" className="flex gap-2 text-2xl font-mono font-bold line-height-none">
+        <Link to="/" className="flex gap-2 items-center">
-          <img src={logo} alt="logo" className="h-12" />
+          <img src={logo} alt="logo" className="h-10" />
-          <span className="flex flex-col">
+          <span className="text-2xl font-brand line-height-none!">
-            <span>News</span>
+            <p>News</p>
-            <span>
+            <p className="mt--1">
               <span className="color-red-6">N</span>
               <span>ow</span>
-            </span>
+            </p>
           </span>
         </Link>
-        <a className="btn-pure text-sm ml-1">
+        <a className="btn-pure text-sm ml-1 font-mono">
           {`v${Version}`}
         </a>
       </span>

src/routes/__root.tsx

@@ -50,7 +50,7 @@ function RootComponent() {
         >
           <Outlet />
         </main>
-        <footer className="py-6 flex flex-col items-center justify-center text-sm text-neutral-500">
+        <footer className="py-6 flex flex-col items-center justify-center text-sm text-neutral-500 font-mono">
           <a href={`${Homepage}/LICENCE`}>MIT LICENCE</a>
           <span>
             <span> © 2024 By </span>

src/styles/globals.css

@@ -9,6 +9,12 @@ body,
   padding: 0;
 }
 
+@font-face {
+  font-family: 'Baloo 2';
+  src: url("/Baloo2-Bold.subset.ttf");
+}
+
+
 html.dark {
   color-scheme: dark;
 }

uno.config.ts

@@ -26,6 +26,13 @@ export default defineConfig({
         }
       }
     }],
+    [
+      "font-brand",
+      {
+        "font-family": `"Baloo 2", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace; `,
+      },
+    ],
   ],
   shortcuts: {
     "color-base": "color-neutral-800 dark:color-neutral-300",